Take Your Web Designs to the Next Level
When you start out as a web designer, you do all you can to grasp the basic design principles so that you have a solid foundation to start your journey on. As you become more proficient in your craft, you start to learn techniques that are more advanced, and you begin to implement bigger and better things in your work until you reach a point where you feel pretty comfortable to step outside the bounds of the ordinary. What else can you do to take your web designs to the next level?
Here are just a handful of ideas you can consider if you’d like to take your web designs the next level.
Delve Into Design Details
If you look at most beautifully designed websites, you’ll notice that they are often set apart not because of big things, but the little details that let you know the designer took great care and attention of even the smallest of things. These small touches don’t need to be in your face to be powerful and effective; details can include a hairline stroke for additional depth, a faint gradient for more interesting surfaces, small icons for added visual appeal as well as to aid visual cognition, and so forth.
Here are three good examples of web designs that delve into the details.
This site rocks with lots of small details that contribute to an overall great design. The banner behind the F6 logo at the upper left corner of the layout has a slight shadow, creating depth and drawing attention through distinction. The shadows behind the large website thumbnails in the middle are also nice for creating depth as well. Small shadows can be seen in a bunch of places if you look closely, as well as hairline highlights too. Unique icons and other small details make this design really shine.
This site design shows great personality through lots of textures, bright colors, and great typography. The navigation banner has plenty of details including unique dividing lines, a wrap-around ribbon with depth, and extra lines at the top and bottom that complete the look. The halftone dotted pattern can be seen throughout the site, not only showing consistency, but also the impression that the designer pays attention to the details.
This site is subtle in colors, but still powerful and loaded with details. Slight shadows can be found everywhere on the site: on the content edging, headlines, dividing lines, and so forth. These subtle shadows are wonderful ways to add small details. The soft glow at the top center of the homepage is a good additional detail as well.
Learn jQuery for Additional Functionality
JS libraries can give designers an easy way to implement animation effects and interactivity into their design and, if you’re the braver kind of web designer, Ajax utilities and dynamic manipulation of markup.
You can find plenty of excellent examples of jQuery use in this site design. Most notably, check out the navigation animation, the header graphic that was made functional with the use of hover events, and the scrolling Twitter feed near the bottom. These additions to the site are classy and professional, adding a lot of goodness into the design.
This cleanly designed website has a few jQuery features to heighten the user experience. Check out the "Preview" box on the homepage, which is a jQuery-based slideshow that slickly transitions between pictures. Also, check out the interesting scrolling action that keeps the sidebar navigation and site logo fixed in place. The site’s theme, minimalist and clean, makes the interactive pieces truly stick out.
Additionally, you can also click on the arrows that appear over the banner of pictures, which scrolls through a slideshow of images. Click through the site and you’ll see other jQuery tidbits at work.
Use Unique Fonts
Great typography can certainly make a good website even awesomer. There are tons of ways to use fun and out-of-the-ordinary fonts in your designs outside of web-safe fonts (e.g. Arial, Georgia, Verdana).
My two favorite methods are the @font-face CSS property and Cufon. Both methods are different —
@font-face) to not only bring your site designs to the next level, but also to take advantage of Google’s powerful infrastructure to serve your font files.
Let us take a look at some sites with great typography powered by web fonts.
This site design has remarkable typography, including the use of the Steinem font for some headlines (rendered using
@font-face). They have also used beautiful fonts as CSS background text image replacements where web fonts weren’t possible, adding more style and personality to the design.
This site uses
@font-face to display the Museo font, which is utilized by all headlines. The font is just distinct enough to make it stand out, but not so much that it’s over the top "look at me I’m using
Cufon is powering the fonts on this site, including headlines and some standout phrases. Using a special font on the site design gives it a little something extra. This site is so unique in look and style — the font fits right in — adding to the rustic theme they have.
Play With CSS3 Goodies
CSS3 has brought about tons of new options for web designers to style their designs effortlessly with. CSS3 isn’t supported in every browser just yet (most notably IE8 and below), but that doesn’t mean we can’t play around with it and create designs that are progressively enhanced. Let us check out some cutting-edge web designs that utilize CSS3.
There are a few CSS3 goodies at play in this web design. They’ve implemented some rounded corners and gradients through CSS. Click through the site to check out the elements they’ve brought in to elevate the site’s design to the next level.
This site that caters to web designers leverages some CSS3. They’ve used the
border-radius property as well as the
box-shadow property for various elements to give them a distinctive look. Also check out the great typography and the use of WebKit CSS transformations.
The images on the homepage use the
opacity CSS property on
:hover. It’s a small effect that adds great attention to detail.
Taking It to the Next Level
As you can see from the ideas I’ve highlighted, you don’t need to add much — just some extra thought and care and paying attention to the craftsmanship of our work as well as keeping up to speed with our growth as a web designer and staying ahead of the curve. Got more tips for taking web designs to the next level? Share them in the comments.
- The Evolution of Web Design
- 16 Best Web Design Galleries for Inspiration
- Reductionism in Web Design
- Related categories: Web Design and User Interface
About the Author
This was published on Sep 30, 2010