10 Elements of Web Design Today

So now that we are, in this so called shift called Web 2.0, what are some of the most prevalent and noticeable elements that have become part of this new culture of design? Tools like Adobe photoshop and Illustrator and WYSIWYG’s have paved the way how the web would be designed. Even though the first version of Photoshop for Windows {code named Brimstone} was released all the way back in 1992, the true appeal of the program to design a web page probably wasn’t used until 1999 when ver 5.5 for both Win and Mac came bundled with ImageReady.

The 10 Elements of Web Design Today -

1. Standards - A web designer knows in order for their design to be widely concurrent with the rest of the design community they would have to be adhere to standards which are set by the w3 consortium. If your HTML, XHTML and CSS don’t validate it’s only one step back for everybody else.

Why is this so important? With the advent of p2p networks the distribution of pirated web design software, coupled with the demand for design services, has increased the number of self taught overnight design aspirants who feel they can knock out a working web page right after they have installed the program. WYSIWYG - not quite my friend.

2. Cross Browser Compatibility - Those best viewed in…recommendations need to be abolished. But that doesn’t mean something else won’t take it’s place, nowadays you see stuff like “Browse the web better” “Get Firefox” or a platform exclusive browser like Safari for Mac and Konqueror for Linux. Other browsers like Opera and Maxthon browsers are very popular as well for their own set of demographics.

The main problem seems to be the handling of CSS and the way it renders in most browsers. This is an example with two blocks that have various styles set to them, have a look at it in IE6, IE7, FF2.0 and Opera 9.1 {if you have it } and see the difference for yourself.

I think a new standard needs to be set for browser releases. The same way there is a w3 consortium there needs to be a browser consortium and no company should be allowed to develop or release a browser that doesn’t meet the basic requirements laid down by the browser consortium standards to display websites.

Web Design shouldn’t have to revolve around trying to hack code for a web page to render properly. Design is both an art and a science and should not become a nightmare. {image courtesy}

3. Clean Markup - Design is not only about what you see on top, but how it looks on the bottom as well. Take Apple for example, they take great pride in the design of their products and go twice as further to make it look as good on the inside, for those who care at least.

From the structure of your pages to the declaration of appropriate meta tags, all are important aspects of good web design today.

4. Designing for Search Engines - 1998 saw the birth of Google and ever since then the web has not been the same. Web designers know they need to create a light and search friendly page to be spidered and indexed within miliseconds by the algorithm that has powered the results for millions of users worldwide. Of course don’t forget about Yahoo, Live and the hundreds of alternate search engines out there the same rules apply.

Light weight graphics, organized code, alt text and more features are the first important steps to building any search friendly page. True, the bulk of SEO is in building a better presence on the web in terms of authority and content but designing a search engine friendly page has also gained importance and is more or less the first step.

5. Impressions - First impressions are lasting impressions. This has everything to do with visibly providing all the information that your visitor needs to know as soon as they visit your website. From your branding, your navigation, the main reason behind your site and the ability to hold their attention for more than 30 seconds.

{site link}

6. Accessibility - The Web Accessibility Initiative is laid out to make the web an equally accessible place for people that may be challenged in various respects. It’s like making sure you have disabled parking spots at malls, bathroom facilities for wheelchair dependent people and the like.

This includes such guidelines as

• viewable and readable contrasts in text and background colors
• text size resize capabilities
• no blinking or moving text
• captions for audio and descriptions for video
• page organization with headings, lists and consistent structure and more…

For a full understanding of what this means, read about web accessibility.

7. Simplicity - K.I.S.S. If you don’t know what that means then I’ll tell you. Keep It Simple Stupid.

I don’t want to guess that a smiley icon could mean a link to your clients page. I don’t want to try and figure out how to find your contact information. Just tell me what your site/product is about in one paragraph and spare me the long sales letter and ditch the video/voice testimonials, with the price upfront please. Really is that too much to ask.

This is an example of how to make me NOT visit your site again and this is an example of how to make me bookmark your site and subscribe to your RSS feed.

8. Intuitive User Interfaces - Humans have this inherent quality to understand something without a rational explanation to carry it out…so I’ve heard. Designing a user interface that makes a 5 year old kid or a first time Internet user navigate your site is an example of an Intuitive UI. Some examples are -

• Google - Basic point is to search with options of Images, Video, News, Maps and more >>
• Yahoo - Object is to convey a portal page with a door for every possible conceivable thing on the planet from Autos to Yellow Pages.
• Wordpress.com - Main message of having the ability to start a blog in seconds is given. Intuition takes over and you can literally start blogging in seconds.
• Feedburner.com - Start burning your feed immediately by typing in your feed and then hit next.

So the main goal of any Intuitive UI is to get people to perform actions, to make them act upon their instincts. It’s like a baby once you teach it to walk it instinctively knows through intuition it can run, pace, jump, kick and so on. Get the picture…?

9. Sense and Sensibility - Web design today has greatly improved concerning the negating of unnecessary elements on a page. Sense is a structured layout with just enough information to draw the visitor in.

The sensibility came from pre-1999 when everything conceivable was done wrong on the web. From the way companies were launching their sites with the assumption that a .com meant money. The bubble put a lot of things into perspective for the web, one of the most important was that sites needed to make sense to people. Sure there are still remnants left and similar pitiable ventures pop up even today, never to be heard of again.

10. Gradients, Beta Tags, Rounded Corners and of course Reflections - Yeah, I saved the best for last. It is no hidden fact that web design today has a lot of the above in it.

The main design elements are to make it shine, give a glow and add a shadow but most of all make it look aesthetic. Some examples for eye candy -

Logos

Gradients

Rounded Corners

Reflections

This is in response to my previous post about web design { you can bookmark it on digg here  }. The post talked about 7 things you don’t see in Web 2.0 from Web 1.0.

Bookmark this post on digg

Enjoyed this post? Then sign up for my RSS Feed.

Technorati Tags: web 2.0, web design, designing