What we’ve seen so far and what to expect.
Although design trends don’t start
and end on January 1 each year, there is a definite tendency to wipe the slate
clean and change your design approach as we enter a new year. Trends help us
evolve as designers. As we challenge ourselves, we continue to push forward to
what’s next or what needs to be fully discovered.
In 2010, new technologies like CSS3 (cascading
style sheets) and Custom Web Fonts with @Font-Face will give designers greater
flexibility and help shape the future of the internet. The continued popularity
of mobile devices will also play a big part in how designers approach Web site
design.
Make no mistake: you will recognize
the ideas behind these trends. Although this list isn’t a drastic departure
from what was popular in 2009, it includes different trends that are being
expanded upon and made better as a result.
CSS3: What does it mean to
designers?
Although CSS3 is not fully supported
by all browsers yet, many designers are experimenting with its new features.
CSS3 is opening up new options for styling content. Designs that were
previously only achieved using cumbersome graphic images are now possible
through more advanced coding options. For example, aesthetical improvements
such as color gradients, drop shadows and rounded corners can now be achieved
in CSS3, allowing designers to utilize these options without increasing page
load times with graphical elements.
The use of PNG (portable network
graphic) files in Web design has made transparency a key design feature as
well. Now, an alpha value or opacity rule can be specified directly in the CSS.
Transparency as a design tool opens up a world of options that were only
attainable with the use of Flash in the past.
What the Font?
There has always been a set of safe
fonts that could be used on the Web: Arial, Helvetica, Verdana and Georgia, to
name a few. Now the @font-face CSS3 rule allows fonts to be called from an
online directory and used to display text in a whole new way. By allowing
authors to provide their own fonts, @font-face eliminates the need to depend on
the limited number of fonts users have installed on their computers. Although
this technology is not without fault, it does present the potential of removing
the font handcuffs designers have had since the beginning of Web design.
However, this does bring up issues of copyright, so there are only a handful of
specific fonts that can be used for @font-face embedding at this time. We’ll
keep our fingers crossed: I think we’ve all had our fill of Helvetica, Arial
and Verdana.
How to Design for Mobile?
There are many factors that
designers have to think about before they begin designing a site. Will the
technologies used work on multiple browsers? What does the site look like on a
small screen? What does it look like on a large screen? Should you have a
mobile version of your site? Previously it was thought that a Web site should
have one version that works across all platforms and devices. But, attitudes
toward the viewing of Web sites across different media are changing. Designers
are becoming of the opinion that designs do not need to render the same
everywhere, nor do they need to give the same
user experience across all Web browsers. Why scale back on the design of your
main site to accommodate your mobile one? The same theories apply when
approaching mobile design:
- Keep
it simple. Because of the lack of space on
the screen and internet connections that are often slower, it’s important
for visitors to have access to what is most crucial, and as little else as
possible.
- White
space. White space is more of a
necessity in mobile design because the typical screen size is so much
smaller. A jumbled Web site would be very user-unfriendly and very
difficult to pull off in the mobile environment.
- Minimal
images. There is great variety in speed
of mobile Internet connections and of pricing plans for access. Visitors
are more likely to be slowed down or concerned with use of their resources
when they’re on a mobile device. Additionally, the size of the screens can
make many images difficult to see and content harder to read. For these
reasons, it’s very common to see minimal use of images in mobile Web
design.
What’s Still Hot!
Typography
This trend started over the past
year and will continue. Designs will trend toward the use of typography as an
integral part of the overall work rather than a liability. Web designers will incorporate
larger, more exciting fonts in place of system text and are pay closer attention
to typographic details such as leading, line height and choice of font.
Magazine Layout
With more people going online who
see the Web as their top source of entertainment and real-time information,
many sites will be gearing toward this type of look, with short articles that
are easy to read and concise. The use of white space will continue to be
important.
Single Page Scrolling Layouts
The use of jQuery JavaScripts allows
designers to present viewers with a single, smooth-scrolling Web page. Motion,
sometimes confused as Flash animation, can now be achieved through jQuery which
is being used more and more. Single page layouts give users an easy way to get
the information they need quickly. Why spend money updating, changing or
thinking about pages that receive no attention?
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 amount of space. In 2010, intro
boxes will push their own boundaries. Instead of the left-flanked intro block,
2010 will see boxes in unusual placement, perhaps even in the middle of a page.
So, what are your predictions for
this year and beyond?
What do you think will be the
catalysts for change over the next year? How do you think the Web technologies
we have now will evolve? Shouldn’t there be some sort of CTA? E.g., Let us
know!