Good design is…

Good design is innovative.

Good design makes a product useful.

Good design is aesthetic.

Good design makes a product understandable.

Good design is unobtrusive.

Good design is honest.

Good design is long-lasting.

Good design is thorough down to the last detail.

Good design is environmentally friendly.

Good design is as little design as possible.

—Dieter Rams

Mobile design

Since the release of  iPhone in 2007, everybody is talking about mobile design. Now with more smart phones that support full CSS and Javascript, mobile design is definitely going to be the future of web design. A lot of sites(ranging from design agencies to editorial sites to web apps) are offering a mobile version. Below are some great examples (screen shots are captured with iPhone from Web Designer Wall article).

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Web design trends 2010

There is a definite shift from what we liked at the beginning of the year to what we are seeking tutorials for at the end of the year. Most of the time, it’s subtle, a perfection or re-interpretation of a currently hot trend. Trends help us evolve as designers. As we master the skills of design aesthetic, we continue to push forward to what’s next or what needs to be fully discovered. (adapted from WDL article by Jacqueline Thomas)

The ideas behind these trends are recognizable but the subtle aesthetic differences are what’s new.  Although this list isn’t a drastic departure from what was popular in 2009, it marks different trends that will be expanded upon and made better as a result. As you think of how you will incorporate new trends into your designs, focus on the main idea of each trend. Be encouraged to dabble into these trends so that you become part of the movement.

  • Oversized header/logo

Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything.

Main Idea: Huge headers that make your visitors remember you.

  • Sketch/hand drawn design

Hand-drawn design is not exactly new on the horizon, but we all know that it is still on the fringes of web design. Many designers admire the style but are afraid to create their own sketches because of the “I can’t really draw” attitude. These designs are not exactly headed to an art museum, but they do convey a sense of whimsy, and blur the line between cold web and personal interaction– the ultimate goal of the internet. If you can doodle, you can sketch for web design.

Sketch in 2010 will become more elemental, and not as much the main focus of a web design. It will be used to personalize standard web copy in new and exciting ways.

Main Idea: Sketch becomes an elemental part of corporate design.

  • Slab typefaces

Slab typefaces are relatively new, although they’ve been around for over 200 years in traditional media. To get a good visual definition of slab typefaces, think of the old Wild West “Wanted” posters. Those bold letters are slab typefaces. Slab typeface is commonly all capital letters and are bold and imposing. Many designers have shied away from slab typefaces in the past because logos and headers were smaller and more understated. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice.

Main Idea: Slab typefaces is used to bravely express who you are.

  • Typography

Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. The idea of mixing varying font sizes together is completely unthinkable. Fonts are meant to be explored, twisted, and molded to fit your purposes. With the correct placement, a website that utilizes Typography as its main design element will be more interesting to a reader than overloading the same site with tons of photos.

Main Idea: Typography is young, but will continue to be a part of web design.

  • One page layout

One pay layouts challenge you to edit away what’s unnecessary. In 2010, this trend will move away from the quirky navigation and become more minimal in its approach. Think of these websites as business cards. These websites will be more of a one-stop-shop for how to locate you and your work on various other sites– your blog and your social media hangouts.

Main Idea: One page layouts will be more about personal profiles and less corporate.

  • Huge images

A close relative to the oversized logo/ header, the huge image does much the same thing. It creates an visual impact that the visitor won’t soon forget. Unlike the oversized header from above, huge images are not part of the site’s branding. Instead, these images draw the visitor into your site, if not for their content then for their humongous size. In 2010, web designers will find themselves more comfortable using these big statements in their design to convey the site’s tone.

Main Idea: Huge images will be used to invite visitors in.

  • Change of perspective

As we’ve discussed before, the desktop perspective has been done to death. 2010 will see a definite change in perspective to a more realistic view. There may also be a move toward side-shot aerial.

Main Idea: 2010 will play around with different perspectives.

Main Idea: 2010 will play around with different perspectives.

  • Interactive/intuitive

Flash has seen better days. There was a time when you couldn’t visit a website without running into an annoying Flash interface. These days Flash is a lot more relaxed and much more professional. Although some designers prefer jQuery for forms and popups, Flash still has its place in design, especially when done subtly. Flash still has no equal to its interactivity. In 2010, web designers will move toward the more redeeming elements of Flash. Because the average visitor is more web savvy these days, designers will also create sites that are slightly more intuitive than in the past.

Main Idea: Interactive design will make a come-back.

  • Minimalism

Forget the old school minimal websites. Websites of 2010 will continue to feature lots of white space but with bold typology and surprising color schemes. Not all minimal websites will agree with the notion of black and white simplicity. Although minimalism is by nature muted, it will also showcase fresh colors. Minimalism isn’t cold, it’s warm and too the point.

Main Idea: Minimalism will venture into typology.

  • Oversized footer

Oversized footers may be everywhere already, but 2010 will find them even more exaggerated. The footers of tomorrow will be less of an after-thought and more of an integral part of the design. Look for footers that feature contain random information, such as feed updates from various social media, daily polls, and Flickr feeds.

Main Idea: Oversized Footers will feature less important, but more personal information.

Main Idea: Oversized Footers will feature less important, but more personal information.

  • Retro

Retro designs are here to stay. Although a lot of the design community admires retro web design, it can be difficult to fully embrace this style without coming across “undone.” The key to retro designs is to be inspired by its tone and underlying playfulness. In 2010, retro design will be expanded as designers find new ways to honor vintage art.

Main Idea: Retro is new again!

  • Intro boxes

“Hi, my name is…” will find an even bigger stage in 2010 as designers recognize the beautiful simplicity of introducing yourself to your visitor. If you’re struggling with making a creative “About” page, the intro box will be your best bet. It forces you to condense who you are into a relatively small about of space. In 2010, intro boxes will push its own boundaries. Instead of the boring hello, designers will find new pick-up lines. And, instead of the left-flanked intro block, 2010 will see boxes in unusual placement, perhaps even in the middle of a page.

Main Idea: New ways to say “hello.”

  • Magazine layout

As more and more people migrate from the comforts of traditional press to online infotainment, designers are challenged to welcome them in with an easy transition. There is a move toward the magazine layout, where information is carefully organized on a single home page, giving the visitor an opportunity to explore as interested. The familiar layout will appeal to appeal to anyone who’s ever read a magazine or newspaper, but it will also be easier to use– no flipping pages! In 2010, magazine layout will become very huge for blogs in particular. (adapted from WDL article by Jacqueline Thomas)

Main Idea: Magazine layouts will be used for infotainment sites.

CSS Zen Garden Designs

The following techniques were used in creating “ipad”, “macpro”,  “couture”, “journal”, and “tech alien” designs using external css styles:

  • html markup from css zen garden
  • initial css from css zen garden, then replaced with newly created external css styles
  • tiny pixel square wood background for body to repeat x and y
  • a fixed header background  non repeat sliced in PS enclosed in a header div within a container
  • an expanding notepaper background  with y repeat sliced in PS enclosed in a midbody div within a container
  • a fixed footer background non repeat sliced in PS enclosed in a footer div within a container
  • for “couture” and “tech alien”, additional exterior wrapper was added to contain the top background repeating x image

"ipad" css Zen garden design

"macpro" css Zen garden design

"couture" css Zen garden design

"journal" css Zen garden design

"tech alien" css Zen garden design

HOT TIPS wordpress as CMS

The following are tips  to consider WordPress for your next easy web site as CMS:

  1. WordPress is FREE. WordPress is basically a Content Management System that you can use to update your web site in real time with graphics and content.
  2. Themes. WordPress can be designed with 100% custom graphics. This means that you don’t have to sacrifice design for a good content manager.
  3. Fresh content! WordPress makes it easy for any authorized user to update or add new content to your web site.
  4. WordPress is now a web site and blogging software. There is NO NEED to have two separate site for your web site and blog. In fact, you can set up as many blogs and content contributors as you want.
  5. Don’t pay for a CMS web site. When you don’t have to pay for CMS programming it means you can spend your budget on the graphic design and layout.

WP rocks

HOT TIPS design user-friendly site

Many web site’s traffic are  slow to non-existent despite having attractive design and informative content. The problem may be that these sites are not user-friendly which means people find them hard to navigate. If they don’t find easily what they are looking for they will instantly click away.

lost in the shuffle

When the viewers like the site they will engage in actions such as making a purchase or signing up for newsletter etc. Following all these tips are very easy because they are all about using your common sense and keeping it simple. Always put your feet  in your potential clients’ shoes and see whether you are satisfied with your site. Does the site load quickly? Does it contain all the relevant information? Is it easy to find relevant information? Does the site reflect the look and feel of the business? Positive answers to all these questions make sure that the site is a user-friendly one.

on target

  • The headlines should be attractive conveying a message relevant to the business.
  • The images should not be overpowering.
  • The text color and size should be readable.
  • Use eye-catching captions because people love to go through interesting captions.
  • There should be a common menu throughout the site.
  • Give importance to text instead of images having texts because search engines can not read texts embedded in images.
  • The site should have interactive features including form, blog, forum, glossary, survey etc.
  • Include a site map so that it becomes easier for the search engines as well as visitors to find the pages on the site.
  • Try to add unique features in your site by checking competitors’ site  to find out the features that make them unique.
  • Spell check and proof read the content of the site because bad content can leave a negative impression.

on target binary

Web Design Cycle

design cycle

web design stages

web development cycle