" Form follows function – that has been misunderstood. Form and function should be one, joined in a spiritual union. " ~ Frank Lloyd Wright, American Architect
The theories behind great web design are not unlike those behind great modern architecture, ie, the shape (form) of a building should be determined by its purpose (function). As long as a building, a machine, a product, or even a website, works as intended, it really should not matter what it looks like, right? So "fluff" with no purpose is wasted, often at great expense. But brilliant architects and designers like Frank Lloyd Wright understood that beauty for beauty's sake was not always a bad thing.
Beautiful designs created for no purpose other than decoration can be extremely useful for attracting new customers or establishing a business' identity. "Less is more", or designing something so simple, logical and utilitarian that it becomes just blah and boring, does not always work. Customers are often drawn to fancy, flashy, fun and inventive things, and this principle applies in the area of web design as well. But we can go overboard with the exotic and elaborate designs that do nothing to add to our users' experiences.
It's no longer adequate to just create beautiful Photoshop mock-ups. These are easily forgotten. Internet users of today are busy and want more functionality. They're drawn to sites that are complex, multifunctional, and entertaining at the same time. And our job as web designers / developers is to make sure they find the experience they're looking for to keep them on the site!
Technology and web design have converged, so it's worth your while to check out some of these trends to make sure you do not get left behind.
1. Depth & Simplicity in Color
You may be thinking "but I hate sites designed in shades of gray. No; step away from the black, white and gray. Be brave; add some color to your designs. You will be amazed at how much impact color can have to get your message across in an attractive and friendly way.
The trend is to use only two or three main colors but use them wisely. And remember to make the text well-defined and easy to read. Some people think colors like red are difficult to use on the web. Not so if done with some forethought. Your design can still be simple, clean and effective with the mixture and subdued use of colors – even red.
At the same time, we're living in an era when 3D is hugely popular. You're right; we do not yet have 3D technology in web design, but we can create faux 3D effects with the expert use of layering and well-placed shadows. One effect is "parallax scrolling". Although it's not really new, it has only recently become more popular. Layered images move around the site at different speeds to create an interesting 3D illusion.
You can do it with some simple CSS tricks or jQuery plugins. Try the effect as a background, or as a header or footer. Do not go overboard and frustrate your users. The results can be stunning and totally entertaining!
2. Make it Touchscreen and Mobile-ready
People are wild today over their smartphones, tablets, iPads, etc. In fact, the prediction is that more smartphones will sell this year than PCs and you need to be ready to respond.
You can not just simplify your original site design or design a dedicated mobile site and think you're good to go. Not so. Many mobile sites give viewers the option to connect to the original site, so you can expect to lose viewers if your original site is not mobile-optimized.
You also need to think about the fact that most web design has always been mouse-oriented. But smartphone and tablet users can not mouse-over anything to illuminate links or use drop-down menus. How do you intend to accommodate the new fingertip navigation?
Horizontal navigation and magazine-style layouts seem ready-made for touchscreens. And, since we no longer have to worry about screen resolution sizes, you should also consider "liquid layouts", where the containers on the page flex based on the viewport window's size. Since so many viewers will be looking at your site both horizontally and vertically, this will give you much more flexibility than fixed-width layouts. Viewers will appreciate it.
For a quick idea about how well your site will perform on a mobile device, visit mobiReady for a page test and possible solutions. Expect some great developer tips from them on improving the mobile readiness, for example:
- Use XHTML Mobile Profile to make your pages work on the widest number of devices and browsers.
- Make your pages readable without images or stylesheets.
- Keep your page sizes and images small. Most mobile device screens are less than 200 pixels wide so larger pages can cause problems, take longer to load or increase data costs.
- Avoid complex layouts, like nesting tables, because they are hard to render in a mobile environment.
- Avoid using frames; they are not supported by most mobile devices.
- Make sure every form has a submit button or users may have trouble using your site.
3. Quick Response
I do not know about you, but I am starting to see those little barcode squares everywhere these days – in magazines, in grocery store aisles, on business cards, etc. They are called "QR", or Quick Response, codes and you should be taking advantage of this hot new advertising tool.
Customers on the go can get information by taking a picture of the QR code with their smartphone camera or other mobile device. (Some may have to download the code reader.) They can instantly access a website, a specific landing page such as a video testimonial you want to promote, a company's social media sites, or even place an automatic phone call direct to the business. One coffee store in Vancouver, British Columbia, serves up their menu to train passengers and lets them order while on the train and find their cup of Joe waiting for them when they arrive at the shop.
Embed them on your website to give visitors a shortcut to your mobile site and include them on your ads and promotional materials. The QR can also be a great way to track visitors by putting a special referral code on the URL you embed in the code. Or use the QR as your avatar when you leave comments on sites. Make sure you put them on mobile-ready web pages so people can view the page easily within their phones.
4. Thumbnail Design
Now that the geniuses at Google have introduced users to the ease of thumbnail browsing, you may want to consider tinkering with your site designs to be sure the elements will display properly (Flash-based sites will not) and capture the viewer's attention.
Have not tried browsing this way? Just hover over the magnifying glass in your Google search list (except you're using a smartphone) and you can see what the site's content looks like without clicking through to the site. Instant gratification and less work! But you'll see that many sites look plain and boring when viewed this way. Make sure yours is not one of them.
5. CSS3 and HTML5
With the explosion of CSS3 and HTML5, you can begin to break away from problematic Flash and take advantage of some of the new technologies. Essentially, what works on a desktop browser will work on a phone (with few exceptions), so mobile support is no longer an issue.
CSS3 is a powerful new tool and should help you design with more ease using text shadow, image transparency, rounded corners, glow effects and border styling. It takes the different sections of CSS and separates them into modules, giving you more browser and operating system flexibility. As it becomes fully adopted, there will be a whole host of advanced style properties such as the ability to use multiple background images and multiple table-less columns.
Both CSS3 and HTML5 will change the way you code but, more importantly, change how you think about the web. They will be the most usable tools for web content and the content can be richer than ever. There are some great demos from Mozilla to give you a taste. Get into it now and be ahead of the curve. This is the future of the internet.