6 Ways To Take Your Webdesign From Good To Great

by ladykathleen on December 9, 2011


Intro

The disproportion between good and good webdesign is comparatively small. The normal chairman might not be means to explain the discernible differences that make adult good design, though they can customarily mark a design they like. By examining some overwhelming sites, I’ll try to put my finger on some of the tiny sum that make adult the difference.

This post is chock full of overwhelming examples. we finished a demur bid to usually collect sites that were good all the proceed around.

1. Make Subtle Use of Gradients

I’m not certain if there is an outcome that can be butchered and make your site demeanour some-more bungled than bad use of gradients. Nothing screams bad design utterly like a rainbow slope (well maybe blinking content is of equal prowess). That being said, the use of pointed gradients will go a prolonged proceed toward creation your site demeanour great. The pivotal is regulating them sparingly within the upsurge of the design.

Gradient Meets Bokeh Effect

The site facilities a colorful, though pointed slope that is seamlessly churned with a gloomy . It’s visually stunning. Just as a side note, if we are meddlesome in recreating a bokeh outcome in photoshop, be certain to check out on it.

image 1

Subtle Gradients, Shadows and Textures Oh My!

The guys during flat-out make overwhelming websites, so it stands to reason their personal site would be tip notch. To go along with copiousness of celebrity throughout, the design itself is spot-on. Check out the use of pointed gradients and shadows in the design. we also adore the hold of grunge and hardness that is sprinkled in.

image 2

2. Add White Space

The tenure white space is mostly misunderstood to literally meant white space. In terms of design it is some-more accurately described as the space between elements. To mangle it down even serve here is how the folks during conclude it.

“Whitespace,” or “negative space” is the space between elements in a composition. More specifically, the space between vital elements in a combination is “macro whitespace.” Micro whitespace, is-yes, you’ve guessed it-the space between smaller elements: between list items, between a heading and an image, or between difference and letters. The minuscule stuff.

It can't be understated only how critical it is to let elements breathe in your design. This is substantially the singular biggest emanate for immature designers. It’s tellurian inlet to try to squeeze each design component into a tiny area, opportunely for webdesigners (despite each clients harsh belief) there is no such thing as a overlay in webdesign, that’s what corkscrew bars are for /* finish diatribe */

Excellent Spacing Subtle Line Breaks

provides a comfy turn of stuffing to mangle adult all the post entries. Also notice the gloomy line breaks that yield separation, though are easy on the eyes and upsurge with the altogether design.

image 3

Beautiful Minimalistic Approach

facilities a pleasing minimalistic approach. The spacing is fluent, and they use an picture with no credentials or confusion to pronounce loudly.

image 4

3. Stay On A Grid

The impulse for grid formed designs can best be attributed to newspapers, though if we demeanour closer we can find grids in all kinds of things. From many websites to trade grids.

and are substantially the dual many renouned grid frameworks. we privately adore the 960 grid, it’s simple, light weight and a good starting point. we design with it a lot of the time, though a grid only means that we have some rhyme and reason to your site elements. Alignment plays an perplexing purpose in creation your site demeanour refined. Nothing in webdesign should be placed though purpose or fixing to another element.

Griding A Portfolio

facilities their portfolio on their home page. They use a pleasing brew of a 3 mainstay and 5 mainstay look. It’s good spaced and visually appealing.

image 5

Columns Within A Design Blog

we adore how presents their posts on their home page. The newest post is vast and featured during the top, the subsequent few are shown in a 3 mainstay grid.

image 6

Lots of Equal Length Columns

is a pleasing grid design layout. The 4 column, 2 quarrel blueprint is obvious, though the slideshow/thumbnails and latest reviews are also on a grid.

image 7

4. Improve Your Typography

Typography is an artform that is spooky on by many good designers. It is of primary significance when perplexing to move your designs to the subsequent level. Of march it plays an critical purpose in readability, though it’s also utterly critical to design and mood.

Using Contrast To Direct Attention

does a smashing pursuit of varying contrasts to approach the viewer’s attention. In typography contrariety can be altered by rise choices, tone variances, and distance differential.

image 8

Nothing Says Typography Like Ampersand Signs

This site looks so good and effortless, though we can tell a lot of suspicion and reason went into the whole process, and that’s generally clear with the typography. The spacing and rise choices are flawless, and I’m smitten with the crafty use of Baskerville on the ampersand signs.

image 9

5. Have Clear and Effective Navigation

Good navigation is so critical in design. If a user can’t find what they are looking for discerning enough, they are substantially relocating onto the subsequent site. It’s something I’m unequivocally sap of, and we know that MyInkBlog could use some alleviation on, and it should be drastically softened in the entrance redesign.

Blog Navigation Via Categories

Far too often, blog navigation focuses on pages and leaves the categories as a delegate suspicion somewhere along the sidebar. does a illusory pursuit of realizing users caring many some-more about anticipating out where their photoshop tutorials are, than where their about us page is. Check out their flawless 2 turn navigation with active difficulty highlighting.

image 10

Effective Icon Hover Effect

Icons can unequivocally be strike or skip on websites. The web is filled with the remanence of this web 2.0 trend, though not all trends are totally bad. The reason web 2.0 got nauseous was since of it’s overuse and pledge use. As with many things, when finished scrupulously it unequivocally can be utterly effective. displays a crafty idol float outcome for it’s navigation. It’s elementary and monochromatic and ties in exquisitely with the rest of the site design.

image 11

6. Use An Awesome and Useful Footer

When the web initial started footers were tossed into the junk raise of invalid things. They were minor, though required evils that indispensable to be displayed, though small suspicion went into the design of them. Now they’ve turn some-more and some-more critical to the altogether design of a site. Don’t skip out on the event to code and finish your design by the use of a good footer.

Lots of Info Credentials

The categorical purpose of a footer is to arrangement required info about the site and copyright info. adds some-more celebrity and seductiveness to his by a 3 mainstay demeanour that displays all from what he’s operative on to books he recommends.

image 12

Search Functionality In A Footer?

site facilities an oversized hunt form in his footer. It’s unequivocally not a standard place for one, though we consider it works for his site. He is also one of the many designers who have taken to featuring their tweets in the footer.

6 Ways To Take Your Webdesign From Good To Great

Final Thoughts

I’d adore to hear your thoughts on the subject. What separates good design? What small things do we pivotal on?

Related Posts:

Previous post:

Next post: