Defining Next-Gen Webdesign

The looks of a site are important to attract (returning) visitors. You might occasionally bump in nostalgic retro sites with large fonts, flat colors and essentially no visual eyecatchers. You often see this with restaurants or small businesses, who have practically no webdesign knowledge and are fine with simple WYSIWYG stuff. Another example would be Tim Sensei’s corner on Japanese verbs, a site I use very often despite the cringeworthy design.

An step further would be the Web 2.0 looking sites made by people with solid design skills, and often filled with gradients, extensive imagery/iconery, shadows and glass orbishly buttons. An example would be the cramped The Lodestone site, which is the official fan community for Final Fantasy XIV Online.

I love webdesign and RPGs so I made a fansite called The 15th Crystal that I tried to give my own spin, and is to me a great example of my definition of “Next-Gen Webdesign”. To me, in bullets, next-gen webdesign encompasses the following.

  • Focus on content in an unobtrusive and clean way
  • Good use of margins to not get a cluttered feel
  • Minimum width of 1000px of website body, always centered and with a top margin.
  • Minimal usage of borders and “boxes” between individual site elements (header, nav, widgets, individual posts,…) All site content should feel like one part
  • Clever usage of opacity to gently display background images
  • Favor drop shadows and borders with a light gray color (#CCC/#DDD). Never use black, it will ruin the smoothness.
  • Pick good fonts and colors, there are tons of great sites to help you get started.
  • Work on all modern browsers, including Internet Explorer. Seriously, there’s nothing wrong with IE, get over the myth.
  • Simple things can do wonders, seriously you don’t need to have a degree in graphic design.
  • Leverage the power of CSS, HTML5, jQuery and Ajax: they’re dead easy and the web is full of docs, seriously.
  • Use subtle animations (I really haven’t added any yet for 15thCrystal)

sdsdsdsdsdsd

Getting your design right is crucial as a webdesigner, and it can be very hard to do when working with lots of different content. Webdevelopers are also faced with the ongoing trends of smartphones and tablets, and popular sites should reassess wether their site is usable on those devices, and maybe even start from scratch all over again. In an age where the web is accessible to millions of people and technologies like HTML5 and jQuery at your fingertips, websites should be easy, informative and innovative towards the end-user.

I’m seeing lots of bad sites flying around but at the same time there are lots of great ones that greatly leverage these new technologies and have you coming back for more. With new technologies in place, more standardization and the market getting used to new form factors I’m confident that the next decade in webdesign will be an interesting and beautifull one. 

Further Reading:

Tizag.com : While not the best example of a well-designed websites, they have tons of tutorials on HTML, CSS, jQuery, Ajax, PHP and more!

W3Schools: Similar to Tizag, with extensive documentation on every single bit of webdesign.

Internet Explorer Developer Network:  Lots of samples and tutorials that should work on all browsers

Mozilla Developer Network: Same, from Mozilla

NetTuts: Great site with tons of articles and tutorials both for beginners and experts

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s