Last week, I discussed 10 “newbie” web design mistakes, and even showed you a page full of those mistakes, as cringe-worthy as they were.
Well, this week, to balance that out…I’m going to show you 10 simple ways to spiff up your page and make it look just a little better. These are all simple tricks that give your page just that little bit of extra detail, like a shined shoe or a little bit of jewelry for an outfit. Read on, and see what tricks you might be able to add to your webdesigning bag!
#1: Use Gradients and Shadows for Page Dimension
Any time you can add a little bit of 3-D to your page, especially if it’s an important page element like navigation or content, do so. Soft gradients, especially as a background, give a page a colorful backdrop without being distracting, and small shadows help a page element like a menu or content block “pop” off the page. (It also looks more modern.)
 Fokal.com The black-to-gray vertical gradient on the logo and navigation buttons, plus the dark gray-to-light gray gradient in the lower half (content section) gives just enough contrast without being too distracting. |
 HairStylesDesign.com The “Popular Galleries” balloon has a slight drop shadow under it, bringing the page element just that much farther forward into 3D. |
CollegeFashion
The logo has a glossy look over the text, painting a slight gradient effect over each letter; also, the navigation below the logo has a very slight gradient. (Not to mention the shadows behind the logo’s letters!)
WhoWhatWear
The bottoms of the logo letters, as well as the tops of the navigation’s letters, have a slight shadow effect that make the page sleek.
#2: Use Georgia Font
According to the New York Times, Georgia font is the preferred serif font for web designers–I personally like it for its soft and yet readable look. (It especially looks gorgeous at larger sizes and in italics…but maybe that’s just me. :D)
#3: Choose Colors that Go Together Well or Set Each Other Off Beautifully
Color scheme is one of the more important facets of your web design. If you’ve got a nicely-organized page, but the colors clash, your users’ eyes will not thank you. However, if the colors blend well or provide a touch of lovely contrast, you’ll have a much better user interface overall.
Freshome.com
Using little hints of the full rainbow in Freshome’s design makes it truly a “fresh” design, especially with white and gray to ground it all.
YouLookFab
The bright teal green of the striped shirt used as a background image, paired with crisp white and black (and a little soft gray), render a page that is attractive without being eye-dazzling.
#4: Blend Your Header with the Rest of Your Page
Gone are the days of a completely useless header image that has nothing to do with the way the rest of the page is designed. *…glances up toward my own blog header sheepishly*
Ahem! Pay no attention to that. Headers are now valid places to put navigation and other site information, so you don’t have to fill them with images if you don’t want to. See the examples below:
Unkno.com
Over at Unnecessary Knowledge, the header and the navigation are literally on the same horizontal lines with each other–just at opposite vertical edges of the page. This allows the focus to fall naturally on the content rather than the “frame” (the layout) of the site.
DesignShuffle.com
With a logo and navigation that don’t take up a lot of visual room, more space is left “above the fold” for content–always a good idea for content-rich sites, if you can pull it off.
#5: Employ Different Fonts for Highlighting Content
No need to go font-raving crazy, but using slightly different fonts in various contexts on your page can make your design be that much more interesting. I usually provide a simple contrast between sans-serif body text and serif headings, but the sites below do even more than that.
InteriorDesign
Let’s see, I count…4 different fonts just in this sample (logo, navigation, colorful headlines, caption text). Each one doesn’t compete with the others, but rather plays off them, accenting each bit of content. There’s a good blend of sans-serif and serif in this example, as well.
DesignReviver
DesignReviver’s site uses 3 different fonts–one for big headlines, one for body text, and one for small side headlines (right side of the page), which helps the user know which content is newest and which posts they also might be interested in.
#6: Make Your Links Interactive when Hovered Over
As of probably 2005, users began expecting interactive links, and the way we webdesigners can make that happen has changed some over the ensuing years. From simple a:hover states to Flash animations, designers have literally tried it all–now, the trend seems to be “simple and lovely” rather than “complex and crazy.” After all, what you’re trying to show the user is that they’re hovering over something they can click on; these sites below do a good job of that.
Freshome
Not only a page of lovely colors, but a sleek, animated navigation as well, making it obvious which category a user is hovering over. It’s not too flashy or over-the-top, but provides just the right amount of interactivity for a navbar.
Webmonkey
Though there are few category links in this navigation, hovering over them provides you an instant look at the articles in the category, which helps a user get to what they need faster.
#7: Specify Rounded Corners for Divs and Other Page Elements
At least for me, rounded corners instantly make a page look better–it’s like putting dress clothes on your site. It looks a little more polished and updated than square corners. (Not all browsers accept the “border-radius” rule yet, but you can use images to get around that.)
 MakeupGeek The rounded corners in both the page border (top left) and the navigation bar make this page a little softer and sleeker than it would be if they had gone with default square corners. |
 HomePortfolio Though it’s very, very subtle, the rounded corner that divides the white content div from the gray background shows the designer’s attention to detail, and brings the page into the 21st century, as surely as if they’d switched from Times New Roman to…well, anything else. |
#8: Design Sleek Icons and Simple but Beautiful Graphics
Thankfully, we don’t have to be detail-oriented artists to make beautiful graphics for our pages anymore–in this age of app icons that are more simple and to-the-point, our site graphics can be just as straightforward and iconic. In fact, that might make our pages even easier to use and navigate; for certain, they look a lot better than busy icons of the past!
Apartment Therapy
Site logos don’t need to make a recognizable shape to befit a site–in this case, the simple, waving orange line transmits a sense of playfulness and innovation just as much as a more complicated logo could, and in less time.
Appstorm
Not only are different types of content noted by different (big) icons, but even the sidebar has a few icons to make navigation easier. The icons are not multicolored or overly detailed either; they’re just basic white shapes or letters, with a solid-color background in a rounded shape. And the site’s logo is a simple lightning bolt–perfect for a site with “storm” in the name.
#9: Include a Little (or a Lot of) Texture
Texture is something I’ve always had a hard time incorporating in my page, because I can never find a texture that I’m really happy with. Yet I know that texture on a webpage gives your background, site headings, links, and even content blocks just a little bit more visual interest, like the examples below:
DesiretoInspire
The textured dark gray background, as well as the roughed-up edging along the top of the page and the uneven “paint” job on the logo, gives the site a literal “rough-around-the-edges” quality…it’s not too perfect and primped, yet it’s still forward-thinking in design. Great for a design site!
InsideFashion Blog
A grungy-textured background in darker colors, contrasted with a lighter-but-still-crumpled header and content div, make this page look like an underground newsletter of sorts, as if it’s truly out of the back pocket of a fashion insider…which is likely exactly what they were going for. 🙂
#10: Align Your Layout in the Center
Nope, not talking about centered TEXT; that was last week. *shudder* But centered layouts are so much the norm in design these days that left-aligned layouts are almost extinct. Users have come to expect a center-aligned page because it’s easier to view, especially on wider-screen monitors. That’s why it’s important to employ this mode of layout design for professional pages–it’s just easier to use!
Keep Designing
Strong contrast between background and content divs make this center-aligned layout easy to understand and draws the user’s eye straight to content.
HerCampus
Here, the background and the content blend a little more, but there’s still a good delineation between what’s decorative background and what’s real content. The user doesn’t have to look all over the page to try to find links and news.
Summary
Adding a little polish to your page may not be confined to these 10 tips, but certainly these design concepts fit into a more professional look. Try one or more of these out in your next design, and see the magic at work!