    
|
|
|
Whilst many designers embrace flat design wholeheartedly, it seems a growing number have already tired of its charms and are casting around for the next big thing.
One contender, being championed by some, is “long shadow” design.
Long shadow design produces an effect like looking at an object late on a Winter’s day, when the shadows lengthen to dramatic proportions. The effect adds a great deal of depth while still retaining an essentially flat aesthetic.
Typified by a 45 degree shadow that extends well beyond the length of a traditional drop shadow, the diagonal lines are reminiscent of early Soviet posters and collages by the likes of Malevich — produced before Socialist Realism became the only acceptable style. It is a similarly positive, ambitious and idealistic style, which is great for icons and branding.
It’s going a little too far to suggest that long shadow design is a solution in itself; it’s simply a development within the larger flat design trend. We’re likely to see many more developments, both revolutionary and evolutionary, before flat design is abandoned in favor of something new.
Whilst not a solution in itself, long shadow design is perhaps a route towards flat design 2.0, and certainly offers a way to introduce drama, tonality and depth to flat design. Used sparingly it can be a highly effective tool.
What do you think of the long shadow trend? Have you used it in a project? Let us know in the comments.
| eBook: How to Grow your Business on Twitter – only $9! |  |
|
|
The following is a guest post by Brian Kardell. Brian wrote me after I linked up Hitch.js a few weeks ago to give me more insight. It's pretty interesting stuff, so I thought we should share that here. Hitch is an artifact of a larger "Extensible Web" movement, including a manifesto, community group, and funny word.
Hitch is a proof-of-concept “prollyfill engine” (we'll define that later) specializing in CSS selectors. It gives you jQuery-style selector plugins right in CSS itself. It’s based on proposals from the CSS working group list a few years ago by Yehuda Katz, myself and a few others as well as some very long email threads with Google’s Tab Atkins and Mozilla’s Boris Zbarsky. During the discussions I found myself wanting to prove something, so I’d write a little code. In the end I worked with my friend Clint Hill stringing it together and re-working it into a usable open-source project that might give developers some immediate value. That's Hitch.js.
I think so. It’s done a few things: First, it shines some light on yet another example of what Alex Russell and Yehuda Katz are talking about in the Technical Architecture Group about a need for layering the design of things and how, for a lot of things, developers wind up re-implementing things that the browser already does much better because we’re sealed off from at high levels and we can’t tweak just one piece. In CSS, we’re missing some primitives and good extension points along the way. It is surprisingly difficult to add this sort of thing. It has also helped to convince certain key members of the CSS Working Group that CSS needs some things like this. Tab wrote about it on his blog in a New Year’s Resolution post. I am pretty confident that we will wind up with some good new abilities in CSS like in the next few years. Until that time, we have Hitch.
This is the key question, whether it was provided via Hitch or natively, what could you do with this new found power? I think you could help change the Web forever. I know that sounds big, but I think it is. We could use it to help better the whole model of how we think about standards. Consider this: CSS 2 became a W3C Recommendation in May 1998. We might still think of “CSS 3″ as being something relatively new – but actually they published the first draft for CSS 3 in August 1999. Way back then, they were discussing way more selector power than is in CSS Selectors Level 3 today. Think about that for a moment. If you were a toddler when they started CSS 3, you would be graduating from high school now. There are a lot of reasons for that, but even if that is artificially long by a factor of 5, it still means that you have to wait a few years for something to make it through the process until anyone really gets to use it. Then it’s sometimes only in nightlies, or behind a flag, so you can’t really use it for anything “real”. Historically then it would be added behind a prefix and a few daring souls might start using it, but it’s hard because it only works in a few browsers. That meant that realistically it was a few more years out until it is usable by a wide enough audience to find out that, actually “I don’t care for half of these selectors and why didn’t they do X instead?” This is exacerbated by the fact that once it is that far, you are really hard pressed to convince anyone to change it because that means potentially “breaking the Web” as they like to say. In a word, that sucks.
What if, instead of that model, I could let you use CSS Selectors Level 4 or 5 – or any proposed selectors right now in a way that was reasonably performant and you could know that the implementation wouldn’t change out from underneath you? It should be possible right? If we use polyfills to “fill the gaps” providing reasonable implementations for standards on the least capable older browsers then why not build reasonable implementations of the proposals in the first place that work on modern browsers – prollyfills - so that we could evaluate, iterate and compete. If we did, we could cut to the chase right? You could complain that they were no good now before they went any further. If we did it out in public on GitHub, you might even be able to fork them and make them better – and you probably would, because, lets face it: Way more people use GitHub than participate in Web Standards discussions. We might even collect data on use, complaints, stability and vendor reviews to determine when one is “baked” enough to worry about moving on to native implementations and prioritize them quickly.
Let’s say there is something in the Selectors Level 4 proposal that you think might be useful, like the :local-link pseudo-class which lets you select links that are within your domain and at varying URL levels (as you often have in navigation links). Is it? Are you sure you even understand it? With Hitch, we can develop a prollyfill for that and share it – in fact, we did - you can view a demo of it. That means you can actually use it for something real today. You can help make it better too, fork it on GitHub and improve it you can send me a pull request, share your use cases, open issues, or add some reftests. Any feedback that you send, we will relate up to the CSS Working Group.
Here's an even more simple example. We'll make a selector that only selects external links. First link up the Hitch.js:
<script src="http://hitchjs.com/dist/hitch-0.6.3.js"></script>Then use the Hitch syntax for adding a new selector. We'll make sure the hostname of the href matches the hostname of the window.
Hitch.add([{
type: 'selector',
name: '-links-external',
base: '[href]',
filter: function (match, argsString, o) {
if (!match.hostname) {
return false;
}
return match.hostname !== window.location.hostname;
}
}]);Then we can use the name we set up there in our CSS. Note the special attribute on the CSS that ensures Hitch parses it.
<style data-hitch-interpret>
a:-links-external() {
background-color: yellow;
}
</style> Check out this Pen!
Or, let’s say that you had a proposal for a selector that isn’t in any draft: You could write a prollyfill and submit a draft by creating a git just like the one above and share it with the CSS Working Group. In fact, this has happened already and you can read about it in our post About :time – Taming the standards process. Even better, what if browser vendors followed this same pattern whenever possible? Well, that’s happened too: Adobe did something similar with a regions proposal – they didn’t use Hitch because they didn’t know about it, but they wrote a kind of one-off that does something similar. Mozilla did this with X-Tags and Google with Polymer – both of which can more freely evolve, be used in any modern browser and even maybe compete a little outside the browser before we rush in and commit. We’ve followed the same basic idea with Futures/Promises and with Navigation Controller. I consider these all great successes that helped us coordinate a lot of groups and get a lot of minds together in new ways.
It has some stuff about Web Components, but those were based on an earlier draft. It pre-dates Mozilla’s X-Tags or Google’s Polymer and we have no real interest in competing with them. In fact, we’d love to collaborate. Both are considerably better and based off updated work. It just turned out that internally we were doing 95% of the stuff necessary to make a simple element “upgrade” happen easily, so we exposed it. If you just want to break down into modular ‘widgets,’ you can probably get away without more. But that isn’t what it's about.
As it stands today, Hitch includes some aspects of a CSS pre-processor, but it’s not a pre-processor. It isn’t intended to be a replacement for things like Sass, it just turns out that internally exposing a bit of simple pre-processing is easy, so we expose it. If you just need some simple token replacement, you can probably get away without more, but that isn’t what it is about. In fact, the input to the actual “engine” in Hitch isn’t even CSS, but a kind of parse tree. It’s layered so that we can move the pre-processing piece out if we can partner up with existing things like Sass. We kept it simple for now because some people don’t have a rich pre-processor and don’t want one and we honestly don’t want to try to compete with those guys. It’s better for us to work together with them for that piece as an optimization.
That’s what The Extensible Web Manifesto is all about – changing the way we think about standards. Hitch predates this, so I can’t honestly say that it is the “perfect” example of it all. Several of us came to very similar conclusions about the same time and we’ve been discussing for a long time now and honing it all. But it does illustrate, at a high level at least, some of how we’d like to change the model and make it possible for good developers to help #extendthewebforward. If any of this sounds compelling to you, I’d encourage you to go give it a read. And hopefully to sign it yourself. Then tell a friend!
An Intro to Hitch.js and the Extensible Web is a post from CSS-Tricks
]]>Like many web professionals, I use Google Docs every day to create and share information. It’s a fantastic suite of tools that’s perfect for collaborating with your coworkers and interacting with clients. In fact, I think mastering Google Docs has become an essential professional skill.
At Treehouse, we use Google Docs documents and spreadsheets for everything from writing video scripts to analyzing data and statistics. I’m always looking for new tips and exploring the menus, because in a tool that I use every day, small efficiencies can add up to big time savings. In this post, I’ll share a few uncommon Google Docs tips I’ve learned over the last few years that will make you into a document-wrangling, cowboy-ninja, spreadsheet-wizard… person.
Using the mouse to click on things may feel easy, but it’s slow. Keyboard shortcuts are one of the fastest ways to get better at any piece of software (especially StarCraft). Whether you’re viewing a spreadsheet, a doc, or you’re in the list of documents, you can bring up a full list of shortcut keys. Just use the following (you guessed it) keyboard shortcut:
When you hit these keys, you should get a contextual overlay that gives you the hotkeys for the current view; they’re different for each app. It looks something like this:
If you’ve mastered the shortcuts in either Gmail or the Google Docs list view, then you’ve actually mastered both. When you’re traversing lots of documents, it’s often helpful to make some bulk edits or star some documents to find them quickly later.
Here are the most important keys for navigating the list view:
If you need to stay hyper-focused on a document in a distraction free environment, this is for you. In a document, go to the View menu and select the Full screen option.
The controls will disappear so that you can focus on your content. I recommend setting your browser to full screen for maximum effect. To get out of fullscreen mode, simply press the Esc key.
When you’re editing a Google document, it’s helpful to create headings so that each section of your writing is clearly defined. The default headings are good for most purposes, but if you frequently need to apply special formatting, you can make your own “headings” and apply them to any inline text. For example, I use the special headings to highlight parts of Treehouse video scripts that include motion graphics, special camera moves, blocking, and computer code.
To create a new header style, simply format your text how you’d like and highlight it. Then go to the Title menu, click one of the right facing arrows next to a header, and select Update ‘heading X’ to match with X being the header number.
Then, when you need to apply the same formatting, you can simply set the text to one of the title styles in the menu as you would normally.
Note: This will only apply to one document at a time, so don’t worry about ‘messing up’ the default styles for other documents or other people in your organization.
Google maintains a directory of templates that you can use to get a jump start on your next document. There’s a pretty huge selection and it’s easy to filter and sort. Whether you’re setting up a personal finance spreadsheet or writing a resume and cover letter, there’s probably a template in there that can seriously cut down on your setup time.
When I create outlines for new courses on Treehouse, the documents tend to get pretty lengthy. Fortunately, if you structure your document using the various header levels in the Title menu, Google Docs can automatically generate a table of contents for you. This TOC allows you to jump to any part of the document, making navigation quick and easy for long documents.
In a document with several headings, place your insertion point at the top of the document. Then, go to the Insert menu and click Table of contents to add a TOC. Here’s a picture of the finished result:
Note: This probably won’t work properly if you use the header hack in tip 4 to format inline text. I only use TOCs for creating outlines and not scripting videos.
Maybe you’re not surprised that spreadsheets in Google Docs are capable of coloring cells based on conditional formatting. Yet for some reason, very few people know about this feature when I tell them. If you’re working with numerical data or dates, coloring cells can help you quickly distill and comprehend large datasets.
I created an example data set that represents a traditional classroom with test scores (and in the process, I also learned about the random number generators in the function list). Let’s say you’re a teacher, and you want to visually identify students that scored 75 or below on a test. To do this, hover over the column header and click the arrow icon that appears to bring up a menu. Then click the Conditional formatting… option towards the bottom.
Note: In the image below, there are numbers in column B that are covered by the menu.
When the conditional formatting modal appears, you can add rules that will color the cells. In the image below, you can see what these rules look like for our example. Any numbers at 75 or below will be highlighted in yellow. Everything else will be green.
Here’s what the data looks like with the added color. Even better, when we sort Column B, we’ll see a visual that depicts the ratio between low scores and high scores. The block of yellow cells will be set against the block of green cells. Conditional formatting is like a grappling hook for climbing the DIKW Pyramid. It’s a tool that can help you make the leap from data to useful information.
Are you ready for some magic? Google spreadsheets allows you to take two cells and find other related terms. First, fill two cells with related items and highlight them, like so:
Now we need to drag out the set. On a Mac, hold down option. On a PC, hold down Ctrl. While holding down the modifier key, click on the small blue box in the bottom right corner of the highlighted cells, and drag downwards.
Google will fill in other related terms. In this case, Google magically filled in the remaining cells with other Star Wars characters. It’s not perfect, but it works pretty well for most things. From what I understand, this technology is what’s left of Google Sets, a defunct Google Labs project.
It’s hard for me to say exactly how you can use this one, but it’s definitely a fun curiosity that’s helped me brainstorm related ideas in sort of a fuzzy mind-mapping fashion. I’m hoping to see some clever ideas in the comments!
The post 8 Google Docs Tips You May Not Have Known About appeared first on Treehouse Blog.
]]>|
|
|
|
|
|
Freelance designers often have to take on more types of responsibilities than those of us who work as part of a larger design agency or design team. Freelance designers don’t always get the benefits of being able to delegate a portion of their design projects to another, or to lean on other individuals when it comes to administrative and managerial duties like invoicing/billing, project planning, taxes, sales, etc.
Because freelancers have so much on our plates, we need all the help we can get, regardless of where this help comes from, or what part of our creative process we can get it on.
Which is why, while generally helpful to all web professionals, feedback is very crucial to freelance workers in the web design industry.
One need not even be a freelance web designer to see and understand how much weight feedback carries in our work.
In this article, I’ll discuss my main reasons for why I think feedback matters so much to freelancers.
Feedback gives us an avenue for sharpening our skills and honing our craft. When engage with the users we are building our designs for, we gain insights and viewpoints that help us improve our current and future products and services.
Many of us in the industry hand off a design, and then move on to our next contract without giving the previous one much of a second thought.
Out of sight and out of touch with the client, then certainly out of mind. However, is that really helping us move forward with our creative and professional abilities?
I can understand the view that once we have handed off our deliverables, technically and legally, our work is done.
But, to me, until a web design has real people using it, our duties aren’t complete yet. That final step of having real users interacting with our product is very important in allowing us to develop our skills further.
Once the design is actually in use, we can then garner important insights as to what we did well in the project. And what we didn’t.
We can harvest this valuable resource of information through the implementation of feedback-gathering tools, by reading comments on social media with the use of social media monitoring tools, teasing out trends indirectly via website analytics, and so on.
In addition to getting feedback from our users, we can also get feedback from our peers. Doing so also helps us improve our design work too.
Getting feedback from other designers in the industry isn’t difficult these days. There are many places to turn to, to get that to happen. From community sites like Dribbble to dedicated online critiquing sites and forums such as Please Critique Me and Reddit’s r/design_critiques subreddit (which has over 9,700 readers), we have a lot of opportunities in our grasps for obtaining peer-feedback on our work.
Receiving feedback from our clients, our users, and our peers can be humbling. That’s a good thing.
Staying humble helps keep us on a dedicated and continual path towards improving and learning our craft with unending drive and passion.
If we become complacent with our creative processes, or if we start to believe that we have pretty much advanced to the top of the game, then we grow stagnant in our abilities and we stop pushing ourselves to innovate.
Idleness and passivity, being fine with the status quo, is dangerous ground to tread on for anyone in any professional field; but this is even more true in a competitive and fast-moving profession like the web design industry.
Feedback from our users does not pull any punches whatsoever. None at all. There is no sugar coating. Or any attempt at gently and politely giving feedback from a constructive place.
You will often get feedback from a user who is already frustrated about something in your web design that’s broken or that’s preventing them from getting the thing they want done.
That type of user feedback can brutal and raw, but what it is also, is that it is honest. It will contain things you need to hear about your work that other people in other situations will be too polite or too unconcerned to tell you.
True, this type of feedback I’m talking about will more than likely contain some things that you probably don’t need to hear too, but that’s where our work lies: In deconstructing feedback to draw out that which we need to take away from it.
Let me share a story with you, about how user-contributed feedback has helped my freelance design business.
After learning (in a particularly frustrating way) from a client of mine that trying to handle the domain registration and hosting setup for my clients can become a major headache, I ended up deciding to drop that service as part of my web design packages.
Dropping the service of registering my clients’ domain names and setting up their website’s hosting for them didn’t seem like a big deal at first.
However, you should also know that many of my clients are small businesses who have no employees or resources to route towards website administration and management.
So, initially, after this decision was made, we had a lot of problems because our clients were having a tough time with web hosting.
What would happen was they would be overwhelmed with how to find the right web hosting solution for their specific needs.
Or worse.
They would bargain basement shop on web hosting services — thinking that hosting companies were all equal and that the price was the most important distinguishing factor between them — without having a look at what people were saying about the web hosting service they would get. Which, as almost anyone with even basic experience in website administration can tell you, doesn’t always produce the best results.
Oftentimes, my clients would end up with a bad hosting solution on an oversold shared hosting service because all they could see was the price of the service, without knowing to consider the other factors that also matter in choosing web hosts, such as reliability, reputation, features like disk space and bandwidth, and so forth.
So I started directing my clients to helpful online resources like Web Hosting Geeks (a web hosting review site) to help them pick their web hosts.
Reading user-contributed feedback and reviews from other people gave my clients true, unbiased insights about the web hosting solutions they were considering.
Feedback in the form of reviews from actual people or third-party organizations is more reliable and impartial compared to reading about a web hosting company through the company’s own website and marketing team.
Think of how often we turn to user-contributed reviews these days for making purchasing decisions (e.g. via social commerce or our social networks). How many times have you ordered a product off Amazon or downloaded an app on your smartphone without first reading through what some of the existing customers have had to say about it?
I now have fewer clients having trouble with their web hosting because of user-contributed feedback.
User-generated feedback and reviews can relieve freelancers from some burdens in our business processes, and all we have to do is take advantage of them when we can.
The value in receiving feedback lies in its fundamental nature, which is that feedback comes through a different set of lenses.
Trying to see a design of ours without the tinted lens we lovingly tend to view them through is not easy to do.
Users, clients, friends, colleagues, and other people come to look at our designs with a unique set of lenses, and it’s those lenses that will expose the things we may be overlooking in our work.
Let me share another story with you. I once had a user contact me about a navigability issue he was having with a web design I created.
The feedback completely floored me.
Having developed the design, I couldn’t imagine anyone being unclear about how the site’s navigation worked.
But that was because I had put the whole design together, and I knew exactly what to expect and do to move around it. I made the design, and I made it in a way that made sense to me.
I forgot that other people would not be viewing the design through the same lens as I was.
That was a wake-up call.
I had failed to consider another person’s perspective, and it cost me more time to go back in and make the correction.
And that will happen. We will make those sorts of mistakes, and we will fail to consider other people’s perspectives at some point in our design process.
Listening to feedback from others effectively helps us avoid or remedy these types of situations.
Have you ever had moments where getting feedback made all the difference in your web design career? Share it with us in the comments below!
Rob Bowen is half of the dynamic duo behind Arbenting and Dead Wings Designs. He is a freelance designer, writer, and videographer with a focus on the Web. Rob’s new Twitter account is @ArbentMedia.
The post Why Getting Feedback is Vital for Freelance Web Designers appeared first on Six Revisions.
]]>|
|
There are tons of blogs, tutorial sites, and other resources out there that can teach you about web design and development. But what if you want something a little bit more formal, without actually having to go back to school?
That’s where resources like the ones below can come in handy. These sites offer courses modeled after those you’d find (or actually from) leading colleges and universities. They’re a great option if you’re not sure where to start, or if you want to bridge the gaps in your current training.
They can also be excellent options if you’ve taken courses in the past, but want to make sure your knowledge and skill-set is completely up to date.
The Google Developers University Consortium offers a ton of great courses for developers interested in working with Google products. Of course that includes designing and programming for Android, as well as Google Maps, Google App Engine, and more. It also offers more general web technology courses, including an AJAX tutorial, PHP development, and information on GIS and KML.
In addition to using the University Consortium for learning, you can also submit a course, including course materials, assignments, lectures, and projects. The only catch is that it has to be Creative Commons-licensed.
Dev.Opera can help you learn all the latest open web technologies, including JavaScript, CSS3, HTML5, and SVG. In addition to web technologies, Dev.Opera also offers up courses and tutorials on Add-Ons, Mobile, and TV. And of course if you have information to share with the Opera development community, you can submit your own articles.
Lynda.com is one of the largest premium tutorial sites for software, business, and creative topics. They have over 1900 video courses, all by expert teachers. For $25/month, you get unlimited access to all of their courses, making it a good deal for anyone who wants constant access to new learning materials.
Lynda.com’s courses are all mobile-friendly, so you don’t have to be chained to your computer to learn. And you can even create your own custom playlists of the courses you want to watch, which can then be shared with others (of course, they’ll need their own Lynda.com account to watch those videos). Lynda.com does offer a free 7-day trial, so you can test the waters before you commit.
Don’t Fear the Internet is a little different from other resources on this list. It covers basic HTML and CSS, but was specifically created for non-web designers, and is instead aimed at creatives in general.
So far there are seven lessons, covering typography, targeting content, CSS, developer tools, HTML, and even a basic primer on the internet. Every lesson is delivered in video format, but with text notes you can easily refer to later.
P2PU’s School of Webcraft is a peer-powered learning environment that’s backed by Mozilla. It’s all completely free, and you can take individual courses or complete beta challenges to test your current knowledge.
Current courses offered include basics like choosing web hosting or a text editor, as well as more advanced topics like Coffeescript and PHP. There are even courses offered in Spanish. And like most resources of its kind, you can create and submit your own courses, too.
Codecademy lets you interactively learn to code, all for free. There are courses for everything from basic HTML to JavaScript to Ruby and other more complex programming languages.
The nice thing about Codecademy is its incredibly interactive nature. Every single lesson includes an interactive element that helps you retain the information you’ve learned. This is a big deal for those who learn by doing, rather than just by reading or listening.
In addition to standard courses, Codecademy also has a strong community where you can join groups to code with others, as well as profiles that let you show off badges and progress.
Code School is another online learning environment that stresses learning by doing. They offer “Paths” that give you a clearcut list of courses you should take to learn different disciplines. there are paths for Ruby, JavaScript, HTML/CSS, and iOS. They also offer “Electives”, which cover topics outside of the basic Paths, including Git, R, and Chrome DevTools.
Code School offers both free and premium courses, with the most basic courses generally offered for free. And of course, you don’t have to follow the pre-defined Paths if you’d prefer to strike out on your own.
Udacity offers up courses in a number of technology and design related areas. There are classes on web development, HTML5 game development, programming languages, interactive 3D graphics, and even topics like building a startup.
The courses are free, and are all highly interactive. Video lectures are bite-sized, meaning you can learn at your own pace without having to sit through hours of someone speaking. And of course all the instructors are industry leaders, so you’re learning from the best.
Why’s (Poignant) Guide to Ruby is one of the best free Ruby courses online. It’s funny, easy to follow, and has great illustrations and comic strips included that really help drive the concepts home.
Udemy offers courses from leading instructors around the world. A lot of the courses offered are tech- and design-focused, though there are also some great courses about startups and other topics.
Udemy also lets you teach your own courses, and earn money doing so. Courses range in price from only a few dollars right up to hundreds, depending on the subject, instructor, and length. There are even some free courses, though you might have to dig to find them.
Skillfeed is a relatively new offering from Shutterstock. They offer a paid monthly subscription (just $19/month) to access courses, though there’s a 7-day free trial as well.
Courses are focused on technical and creative skills, and there are also “Skill Snacks” that offer up quick tips and tricks that you can learn in just a few minutes. Skillfeed video classes can be accessed from your desktop, laptop, or mobile device, too, so you can learn anywhere.
Treehouse offers a huge library of step-by-step video courses and tutorials for a variety of in-demand technologies. You can learn to build websites and web apps, mobile apps, or even how to start a business.
There are currently over 1000 videos in the library, with more being added all the time to keep you up-to-date. As you complete courses, you’ll earn badges you can proudly display on your profile to show your achievements. And each course has interactive elements to make it easier for you to retain the information you learn.
Pricing ranges from $25-$49/month, depending on which plan you choose. The more expensive Gold plan gives you access to feedback on your projects, as well as additional information and workshops.
Coursera offers courses on a huge number of subjects, including a robust catalog of information, tech, and design courses. Courses in these subject areas include topics like social media, data science, creativity, innovation, metadata, digital democracy, and much more. Courses are offered on a regular basis, and are done more like a traditional college with weekly lessons and assignments. Each course runs from just five or six weeks up to 19 weeks or more.
The Tuts+ Network has been a leader in design and technology tutorials for years, with both free and premium resources. Now, their Tuts+ Premium Courses give a more formal educational environment for learning about some of your favorite topics. There are courses on everything from parallax scrolling in web design to jQuery to web application design. Most courses run a dozen to two dozen lessons, though there are some that fall outside of those parameters.
Courses are available to all Tuts+ Premium members (who also get the benefit of hundreds of tutorials and 73 ebooks, as well as weekly new content). Tuts+ Premium membership is $19/month (or $15/month if you pay yearly). They do offer two free courses if you want to try it out: 30 Days to Learn HTML and CSS, and 30 Days to Learn jQuery.
Timothy Training offers tutorials for a number of web technologies and programs, including Dreamweaver, HTML and CSS, PHP, MySQL, and more. They also offer live training and even on-site training.
OpenLearn is the online home of the free courses from The Open University. They offer courses on a huge variety of subjects, including technology and design. The Design and Innovation category has some great courses that would be of interest to a web designer, including Design in a Nutshell, while the Computing and ICT category has more technical courses, including classes on open source, Google, design thinking, and more.
iTunes U is probably one of the better known online educational portals out there, with courses from some leading educational institutions around the world. They offer courses designed by schools, colleges, universities, and other organizations from around the world.
Courses can be found by searching or browsing, as well as by looking through the top-rated charts. There are even topical collections put together by top institutions. There are a number of courses and collections aimed at designers and developers, including Developing Apps for iOS, iOS Game Development, Talking Design, and Creative Media. iTunes U can be accessed through any iOS device. Educators also have the option to create their own courses.
Academic Earth offers free courses from colleges around the world in a variety of subjects, including Introduction to Visual Thinking, Building Dynamic Websites, and Computer Graphics. Lessons are presented in video format.
Courses offered through Academic Earth are presented by institutions including Harvard University, Dartmouth College, Columbia University, Cornell University, Indian Institute of Technology, MIT, and more.
KillerPHP.com was created to teach practical PHP skills to web designer types, rather than developers. They offer up video tutorials on PHP and MySQL. You can subscribe for just $29 for 3 months or $99 for 12 months, or purchase courses individually.
WebDesign.com approaches online learning a bit differently than most of the other sites listed here. Instead of letting you simply watch video lessons on your own time, they offer live, interactive webinars. Webinars are also included in their video training library, which subscribers have complete access to.
They offer some live webinars for free (mostly on non-technical subjects), while others are only available to members. Membership is $197 for a full year, which includes access to the full library as well as their library. Monthly and yearly subscriptions to just the live webinars are also available, for $47 and $97 respectively.
If you’re interested in learning web standards, then the Web Standards Curriculum, offered by W3C, is a great place to start. It covers everything from web design standards to HTML to CSS, and even has information on JavaScript, accessibility, mobile web development, and SVG.
They also include resources aimed at teachers, with additional references, teaching materials, and project activities.
Regardless of what you want or need to learn, you’ll almost certainly find what you’re looking for at one of the sites above. They’re a nice way to educate yourself without the cost of a formal education, but with more direction than just randomly surfing tutorials.
Have you used any of the resources above? Or did we miss any you think should have made the list? Let us know in the comments.
| eBook: How to Grow your Business on Twitter – only $9! | |
|
|