“Form follows function, that has been misunderstood. Form and function must be one, united in a spiritual union.~Frank Lloyd Wright, American architect
The theories behind great web design are not dissimilar to those of great modern architecture, that is, the form of a building should be determined by its purpose (function). As long as a building, a machine, a product, or even a website is working as intended, it really shouldn’t matter what it looks like, right? Thus purposeless “fluff” is wasted, often at great cost. But brilliant architects and designers like Frank Lloyd Wright understood that beauty for beauty’s sake is not always a bad thing.
Beautiful designs created for no other purpose than decoration can be extremely helpful in attracting new customers or establishing a company’s identity. “Less is more,” or designing something so simple, logical, and utilitarian that it becomes just plain blah and boring, doesn’t always work. Clients are often drawn to things that are sophisticated, flashy, fun, and inventive, and this principle holds true in the area of web design as well. But we can go overboard with exotic and elaborate designs that add nothing to our user experiences.
It is no longer suitable to simply create beautiful Photoshop mockups. These are easily forgotten. Today’s Internet users are busy and want more functionality. They are 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 checking out some of these trends to make sure you’re not left behind.
1. Depth and simplicity in color
You may be thinking “but I hate sites designed in shades of gray. Simplicity is nice, but does it have to be boring?” Not; move away from black, white and gray. Be brave; add some color to your designs. You’ll be surprised at the impact color can have in getting your message across in an engaging and friendly way.
The trend is to only use two or three main colors, but use them wisely. And remember to make the text well defined and easy to read. Some people think that colors like red are difficult to use on the web. Not so if done with some foresight. Your design can still be simple, clean and effective with subtle and subdued use of colours, including red.
At the same time, we live in an age where 3D is very popular. You are well; We don’t have 3D technology in web design yet, but we can create faux 3D effects with expert use of well-placed layers and shadows. One effect is “parallax scrolling”. Although it is not really new, it has only recently become more popular. Layered images move across 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, header, or footer. Don’t overdo it and frustrate your users. The results can be amazing and totally entertaining!
2. Prepare it for touch screens and mobile devices
People are crazy today about their smartphones, tablets, iPads, etc. In fact, the prediction is that more smartphones will be sold than PCs this year, and you should be prepared to respond.
You can’t just simplify your original site design or design a dedicated mobile site and think you’re ready to go. Not so. Many mobile sites offer viewers the option to connect to the original site, so you can expect to lose viewers if your original site is not optimized for mobile devices.
You also have to think about the fact that most web design has always been mouse oriented. But smartphone and tablet users can’t hover over anything to light up links or use dropdown menus. How do you plan to accommodate the new fingertip navigation?
Horizontal navigation and magazine-style layouts seem to be ready for touchscreens. And, since we no longer have to worry about screen resolution sizes, you should also consider “liquid layouts,” where containers on the page flex based on the size of the viewport. Since 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.
To get a quick idea of how your site performs on a mobile device, visit mobiReady for a page test and possible solutions. Expect some great developer tips from them on how to improve mobile readiness, including:
- Use the XHTML roaming profile to make your pages work on the widest range of devices and browsers.
- Make your pages readable without images or style sheets.
- Keep 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, such as nested tables, because they are difficult to render in a mobile environment.
- Avoid the use of frames; they are not compatible with most mobile devices.
- Make sure every form has a submit button or users may have trouble using your site.
3. Quick Response
I don’t know about you, but I’m starting to see those little barcode squares everywhere these days: in magazines, in grocery store aisles, on business cards, etc. They’re called “QR” codes, or Quick Response, and you should take advantage of this new advertising tool.
Customers on the go can get information by taking a photo of the QR code with the camera of their smartphone 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 testimonial video you want to promote, a company’s social media sites, or even place an automated phone call directly to the company. A cafeteria in Vancouver, British Columbia, serves its menu to train passengers, allowing them to order while on the train and find their cup of Joe waiting for them when they arrive at the store.
Embed them on your website to give visitors direct access to your mobile site, and include them in your ads and promotional materials. QR can also be a great way to track visitors by placing a special referral code in the URL that you embed in the code. Or use the QR as your avatar when leaving comments on sites. Be sure to put them on mobile-ready web pages so people can easily view the page on 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 tweaking your site layouts to ensure elements display correctly (Flash-based sites won’t). ) and grab the viewer’s attention.
Haven’t you tried to navigate this way? Just hover over the magnifying glass in your Google search listing (unless you’re using a smartphone) and you can see what the site’s content looks like without actually clicking on 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 start to move away from troublesome Flash and take advantage of some of the new technology. Essentially, what works on a desktop browser will work on a phone (with a few exceptions), so mobile support is no longer an issue.
CSS3 is a powerful new tool that should help you design more easily using text shadows, image transparency, rounded corners, glow effects, and border styles. It takes the different sections of CSS and separates them into modules, giving the browser and operating system more flexibility. As it’s fully adopted, there will be a lot of advanced styling properties, like the ability to use multiple background images and multiple columns without tables.
HTML5 is the next expansion of the HTML standard, which is the foundation of almost every site on the Internet, and while it’s in use (many Google products already use some of its features), it’s also in development. HTML5 will add many new features designed to better handle multimedia and graphical content so you don’t have to rely on plugins and APIs. You can extract images, audio, and video directly into your documents and make everything easily accessible using JavaScript. iPhone and iPad users can now access the Internet with many means.
Both CSS3 and HTML5 will change the way you code, but more importantly, they will change the way you think about the web. They will be the most useful tools for web content and the content can be richer than ever. There are some great Mozilla demos for you to try. Get involved now and stay ahead. This is the future of the Internet.