In this ongoing series of posts, kickstarted with our “10 Graphic Design tips for e-learning educators“, we try to provide you with the required know-how for improving the look and feel of your e-learning content. In our last post we talked about the use of images and illustration. In this one we’ll be discussing modern graphic design trends.
Some of the design tips we talked about in this series of posts are timeless, sensible advice; use the right fonts, optimize your contrast, stick to a color palette, etc. Those are essential properties of any good design.
The problem is, you can religiously follow all of these rules, and still end up with a website that, while elegant and readable, looks stale and dated. Nothing says “cheap” and “amateur” than a 90’s looking design, whereas a Web 2.0 era style signals that you are a tad behind the times in this Web 3.0 era.
To get the current “hot” look, functional design guidelines will not do. You’ll have to recognize and follow the latest web trends. If you don’t know where to start, don’t worry. Just read the following tips and you’ll be ready to nail the elusive mid-2014’s look in no time.
Study the competition
The first step of getting your design up to date is finding out what a modern design is supposed to look like. Check what your competition is doing. Study up and coming startups, since those usually incorporate new design trends faster (established businesses are more conservative and slow to change).
Check online design resources; they often have features on current design trends and how to reproduce them. They also often showcase celebrated new website that can serve as an inspiration.
Professional HTML themes are another good source of design cues, as they tend to change with the times and keep up with the latest web fashions.
Make your own choices
There’s not one and only “modern” look. At every time there is a dominant look (“Web 2.0” back in the day, the “flat” obsession of the last couple of years, etc) and several smaller trends and directions fighting it out. Some of these will go obsolete, others will establish the future fashions.
Don’t feel obliged to follow the dominant look to a tee. Analyze it, check what works with your content, mix and match elements.
If your basic design is solid, even a small touch of current design fashions can work wonders. If it’s not, you’ve got bigger issues than how modern you look.
Don’t overdo it
Fashion is fickle. Some design elements get so much exposure that they become unfashionable (like the Web 2.0 era gradients). Others were always fads, styles that caught like wildfire, and died out just as fast.
Be conservative in what you adopt, as there is such a thing as being “too fashionable”. If you want to play it safe, follow the design of established sites like Apple, Facebook, Twitter, Google, Yahoo and the like. Those tend to adopt (and even set) the latest trends without getting overboard.
Some of the design trends can be questionable. Use your judgement. There are also lists of “tired” and “cliche” design trends in designer websites you can consult.
Be aware of trends in functional design
Modern design is not just about the looks. It’s also about the functionality, the way a website behaves.
One important such element is “responsiveness”. Modern website designs are supposed to adapt to different screen sizes and be able to cater to computer, laptop, tablet and phone users. This is not some technical consideration that’s transparent to the user; it’s something that affects how your design looks and feels (e.g a smaller screen size might necessitate hiding some parts of the page, or changing some GUI elements).
Another such trend is “one page apps”, websites with only one page, in which the content is changed dynamically. This allows for faster loading and more interactivity, but to adopt it you’ll need to rethink your design, letting go of the old notion of a “page” and embracing the modern notion of a website as an “app” (that is, your navigation should have the feel of a native desktop application).
Embrace modern web technologies
The technologies you use in your website play an important role in how current it looks and functions. There are lots of HTML5 technologies you can leverage to give your design and e-learning content a competitive edge.
Plain text and images can be adequate for some content, but they have not been cutting edge since the mid-nineties. Today there are available options for audio, video, 2D and 3D drawing, animation, synthesizing sound, etc.
SVG and Canvas HTML5 APIs can help you add up to date graphics, from plots and graphs to interactive animation. With WebGL you can incorporate 3D elements (e.g molecule models for your chemistry e-learning classes, or building models for your architecture lessons). HTML5 also has native audio and video capabilities, so you can enhance your content will full blown multimedia. There’s even stuff like MathML to help you incorporate mathematical notation in your e-learning content.
Rinse. Repeat.
A modern design has, by definition, an expiration date. There might not be a clearly defined cutoff date but sooner or later the design trends you followed will fall out of fashion, and your once cutting edge design will start looking dated. In practice, a new design has about 3-4 years until it starts needing a face-lift.
You can opt to make small updates over time to keep it current, or leave it as it is, and do a full makeover every few years. Both are valid approaches, and both have worked for well known websites (Google usually does incremental updates. Microsoft and Yahoo prefer less frequent, larger scale makeovers).
In either case, don’t rest on your laurels. Keep an eye on changing trends, and watch out for when the one’s you followed fall out of fashion. Being current is an ongoing effort.
