Many people use the word quality when describing their web design services, but how do you know if a website is quality design or not? There are quite a few ways to find quality within web designs, and once you understand what goes into making a quality web design, you can use those techniques to perfect your own web design.

Here are a few pointers to find quality websites, and some good examples of quality websites designs.

1. Correct Spacing

Spacing is the main thing I look for within a good website design – and clever use of spacing with design elements. Pay close attention to how certain things are spaced out and lined up. Spacing can really make the difference of the overall appearance and sense of quality in your design.

The key to getting your spacing right is to look at the big picture of your design, this can  really help you get a good idea of how to best space your design elements. Sometimes stepping away or taking a different look at your designs can be a great help. The biggest mistake people make when it comes to spacing is having their content too close to the edges of the layout. No matter how well you designed your site is, if you cram too much content in a small space, it will lose it’s style and quality.

Example of Excellent Spacing

Great Spacing on Rdio.com

If you havn’t seen rdio‘s new design, you need to check it out. As you can see, there is a very clean and open feel to the content on rdio‘s homepage. The designer allowed for a good amount of space around the text, sections, and images.

Tips on Effective Spacing

Deciding on how much space to use is something that will vary from website to website, there is no set amount of space you need. You just need to train your eye to allow for the correct amount of spacing for each element, and use it effectively to fit the design. This only takes practice and experience to pick up.

• Design on a grid system
  Using a grid certainly helps you to understand the importance of spacing and keep everything organized and it it’s place.
• Practice makes perfect
  
You can always use a the trial and error method until you find what looks right.
• White space is not wasted space
  
Just because you have an empty area, does not mean you have to fill it.
• Less really is more
  Rather than trying to see if you can fit more into an area, try to fit less, keep just the vital important information and elements.

2. Pixel Perfect Details

You really can tell when somebody put real time and effort into the finish of a web design. It is the subtle things that really make the difference, and a lot of people might not even notice those fine details. Pixel Perfect quality can be found by paying close attention to lines, edges, and borders.

Rather than having a simple straight line, add small details. Whether it is the use of subtle gradients or something as a simple 1 pixel shadow or highlight, details can really make your work have a sense of quality to it.

Examples of Pixel Perfect details

The details on flov’s website

flov has a great understanding of how to make pixels work. You can see how they made the top navigation and mid-section look slicker by adding a subtle texture with eye-catching color and fonts.you can even notice the subtle text behind the header image.

Pixel Perfect Buttons & Separators on Jean – Marc Denise’s portfolio

This beautiful navigation, is a great example of using pixel perfect details to get that feel of quality in your design. The highlighted blue button has a distinct highlight, and the separating lines between the links have the same level of quality and detail, as you can see rather than just having a gray line separation, Jean has included a 1 pixel highlight to the left of it to prevent it looking flat and 2 dimensional.

Quick tips for Perfect Details

Practice really makes perfect here. You don’t need to rely over the top bevels and gradients to give the impression of depth. As you can see, the examples use something as simple as a 1 pixel highlight line to add depth to their designs.

• Subtlness is key

  Small details that compliment the content are the key to being subtle.
• Think pixels

  Borders, gradients, lines and shadows don’t have to be huge to be effective.
• Before and after 

  Compare the results to how they looked before you applied the effects. This will help you see if they were effective or not.

3. Well thought out Typography

Even though the content of a website is not usually written by the designer, the designer plays just as important role in the overall quality of the content. It is the designer’s roll to make sure that the content is displayed in a way that is easy to read and follow through. There are many things you can do to ensure your type is readable and useful.

Here are some examples of how typography really does make a difference.

Examples of Well Thought out Typography

Big & Beautiful on paarva

Titles are important within a web design. A popular trend in web design is to use big or bold fonts for titles. This works in a number of positive ways, not only is it good from a usability point of view, but it helps to create space and define structure within a design. This example from paarva.com is a great example, you can see how the title creates a lot of white space (or yellow, whatever) around it, and is naturally very easy to read.

Leading & Spacing with your Text

The  Layer Vault website really is a beautiful example of how important typography is within web design. The actual typeface itself is very slick, and is a great choice of font. The thing that stands out the most to me, is the attention to detail with the line height (leading), the spacing between each letter (kerning) which has been increased from the default value to create a lot more space and make the text much more readable. A trick which you could try in your next design.

Fonts that fit the mood, 10 Cursive Fonts Website

You can make your choices based upon the different moods certain fonts help bring to a design. The example here has a retro and worn look to it, while still having a very open and modern feel to it, so choosing fonts that help evoke a similar moods to these is essential to it’s success. The modern feel to the website comes from using a very different font to the titles, the main content body is written in a sans-serif typeface with a very open feel to it. The two choices of typeface in this example really help to compliment and set the mood of the design.

Typography tips in Web Design

Spotting good use typography within web design becomes a easier when you’ve seen great examples of typography. But what is it that makes these examples so good, and what should you be looking out for when you design your next website?

• Is it readable? 

  People don’t like to work, make sure everything is easy to read. Don’t be scared of making your titles big and bold, or using callouts to get the main points across.
• Kerning and leading

  Spacing between letters and lines can greatly improve your site’s readability.
• Do the fonts fit the design?
  Obviously you wouldn’t use comic fonts in a law firm’s website. Make sure your fonts fit the mood of the design.

There are probably a thousand more tips out there. If you want to learn more about great use of typography, I suggest looking for more examples of it – online and offline(another post on this later).

4. Organizing Elements

Being a designer appeals to many because of it’s creative nature, and sure it can be a fun and rewarding career. But, how can organizing be creative or fun? Once you get into a habit of good layout organization, you will find that it is not as dull as it sounds. The way you organize design elements in a website are always going to be different. These factors depend on what type of site it is, how important certain features are, and the content of the website.
Although how and where you place things will always vary, there are some things you can do to make organizing your elements and content easier. First, decide on what you want your design to achieve. Are you designing to sell a product? Are you designing for content? Or, are you designing for signups and referrals?

Here are some good example of website designs achieving, things.

Designing to Sell: turningart

Taking a look at tturningart’s website, it’s easy to see that it’s no coincidence they are selling their products so well. They’ve made it as easy as possible for you to see what’s for sale and help you to make the final decision to buy. Everything you want from a site designed to sell. Attention is the first thing they’ve done, they get your attention quickly with a summary and big bold titles(steps). Next they generate interest by showing how you can use the product with a lovely illustration. The final feature to keep in mind is action; turningart uses various action points throughout the page Tt is also nice to see that even though the page is quite long, they even have an action point in the footer.

Designing for Content(blogs): Think Vitamin

When you’re designing for a blog, it is a completely different story. You don’t need to convince and re-assure your users about your product. Your “product” is already on display -the content. Make it as easy as possible for your users to see your posts, explore, and connect with your blog.

Content should be the first thing they see on your blog. In this example a nice bold title and icon really draw your eyes straight to the content. A good sized preview image provides good visuals, and date and author information provide experience and a time. For me this is one of the most perfect examples of what I would class as quality “Content Design.” Attention can be directed to anything of interest and the focus is to help the users to stay connected with the content. This will, without a doubt, increase the amount of subscribers and visitors. Encouraging your users to explore your blog is quite simple, you can use anything from tabbed recent or popular content in the sidebar, to drop down menu’s or simple & effective lists. Blogs tend to be very personal things, so allowing your visitors to connect with you in a variety of ways can be a big plus, and can help encourage people to get to know you.

Tips to Help with Organizing your content.

There are times where you will need to break the norm and think differently. Here are some tips to keeping your design well structured and well organized.

• What are you designing for?

  As we’ve shown in the above examples, decide what the goal of your design should be.
• Designing on a Grid

  Grids allow you to keep everything lined up and help you figure out what size certain elements should be.
• Testing placement
  
Be the visitor, would you be able to use it. Is it easy to navigate, or figure out what to do?
• Remove unnecessary elements

  Anything that is not essential to the goals or design should be removed.
• Balance of attention

  Some things need to stay simple to allow other elements to be found.

5. Restraint & Subtlety

New designers always seem to look for ways to make an impact with a very unique design or some special effects within a design, but sometimes you can make a bigger impact by restraining yourself. There is a point where something crosses the line from being a good design to being overkill. A good designer can spot when that line has been crossed, and avoids putting too much into a design element or special effect.

“The details are not the details. They make the design.” -Charles Eames

Examples of Web Design using Subtle Effects

Gradients and more on Gomi

I’m always on the look out for subtle effects on all the websites I visit. Gomi is a fine example full of of subtlety. Pixel highlights, gradients and drop shadows everywhere. Gradients are often over used and really in your face, but used correctly gradients can add a element of reality and depth to a design. Most people might not even spot the gradients, and those for me are the best ones.

Tips for a subtle design

Subtle details can push a design from good, to amazing. If you are looking for a way to inject something special into your designs, try adding subtle detail.

Here are some tips to keep in mind when including subtle details in your design.

• Build layers

  Never use one brush or texture and call it done. Build detail by adding more layers of subleness.
• Opacity
  Even a 3% opacity can have a positive impact.
• Colors
  
Done be afraid to be try colors you think would not “match”, sometimes a color off the palette is what you need to balance a design out.

6. Using color to create quality

The first thing people judge in a design is the color, which is a huge mistake because it should not be based on their personal preferences. If you are ever in a situation where you need to decide which colors should be used in a design, remember they should always be based on the brand  and building the mood.

Brilliant use of color In Web Design

Variety in your Backgrounds: Round Robin Studios

It’s not enough just to have color in your background and expect that to make it interesting. Some of the best backgrounds are those that have a bit of variety, in this example we see that the beautiful blue and grey colors are subject to all sorts of lighting effects and gradients. It gives an extra something to the background, and prevents it from looking stale and flat. Important to note here too that the contrast between the dark & deep orange works really nice set behind the much lighter content area.

Tips for using color in design

Color is always a good area for exploration and trying different possibilities and variations, but it’s always important to keep a few things in mind when choosing colors and a color scheme.

• Experiment
  
A boring topic does not always mean a boring color scheme. Get creative, and experiment with different colors.
• Variety

  Try using gradients, patterns, brushes on backgrounds. Color alone doesn’t always make something look good.
• Stick to a color palette – most of the time
  Make sure your colors are relevant to your product or service.

7. Build to fit

One of the newer techniques in web design is building sites to be responsive, or fitting the screen of multiple devices. If you take the time to build a site that fits everything you can imagine, that is quality. Building a responsive website is no easy task. Every design element is taken into consideration.

Examples of responsive websites

Oleo Interactive

Oleo Interactive is an great example of a quality responsive website. Move the browser window around and see what I mean. Check out our post for more examples of responsive websites.

Tips for building a responsive website

Obviously the above examples are not meant to be “inspiration” for unique ideas, just simply a couple of sites that I find unique.

• Define the break points
  Before doing anything, figure out where your breakpoints are going to be. A typical responsive design tends to have 3-4 break points that cover a small range of viewport dimensions.
• Get started!

  With your break points defined, now you can begin to consider the design layout. If you haven’t already, familiarize yourself with what other people are doing (what layouts work), and check out the above examples. Read out post to help your get started with responsive web design.
• Get it in the browser
  As soon as you can, start building a prototype of your sketches/wireframes. You do not have to wait until the design is completely finished to begin building the website. Many people start here before opening Photoshop, and add design elements later on.
  
  

8. Doing something nobody else has done

Some of the best websites around are designed by those that thought out of the box, and those that challenge the norm can end up changing what the norm is. No matter what we do, try to be original and think differently in your design. But, keep in mind there are reasons some thing have never been done, and it’s usually because it does not work.

Examples of those that challenged the norm

Bobadilium and their story-line

Bobadilium have one goal in mind, getting their message across. So they’ve got very little text, they have a unique story-line explaining how they work and what they can do for you. This is much more appealing then just having a list of services.

ConvergeSE’s animations

ConvergeSE’s site shows us howto draw in the use and create a really impressive site. You are greeted with a dinosaur whose skin and weapons come off as you scroll the page. There’s no mass of text or fancy words to convince you that you need to go to this workshop, it sort of speaks for itself. I love how this site works.

Tips for trying something new

Obviously the above examples are not meant to be “inspiration” for unique ideas, just simply a couple of sites that I find unique.

• Keep it Relevant
  If you’re going to do something very new and unique, ask yourself “does it make sense” and “does it fit with the branding?” if so then go do it!
• Ignore everything you know!

  Okay maybe not everything, basic principles may stay the same, but there’s no point looking for inspiration on new ideas, you’ll just be heading in the wrong direction.
• Keep a level of quality
  I think generally if your new idea looks good, and works well it’s much easier for you to justify.

What Do you look for in a Quality Design? There are so many things that can make a design stand out as quality, we only covered a few of the basic points, so we would love to hear your ideas on finding quality within web design.

Image by: Mirco Zett

1. Expose yourself different design mediums

This is probably the easiest, most effective thing we can do to spark an idea. We know that staring at a computer screen all day long can really wear you out after a while. Refresh your creative brain cells by: going to a movie, seeing a band, drawing thumbnails on paper, or painting a picture. Whatever you do, get out of your comfort zone or area of expertise and immerse yourself in something creative that might inspire your on-screen designs. Finding elements you enjoy in these things will help understand your creative approach.

2. Try color combinations as the starting point

We know how certain colors can evoke an emotional reaction in users. Why not use this technique on ourselves? Take advantage of tools like colourlovers.com and color theory books to explore different colors and combinations. You should even try browsing and looking for unique palettes in magazines or other printed art. Ask yourself: What makes these colors “work”? What kind of adjectives would describe them? Which type of client or audience would this work for?

3. Brainstorm

A great way to start a project is to get your team together, do some quick sketches on a whiteboard, and get as many ideas out of everyone as possible. Having an “idea board” of some kind will help visually collect the ideas in the collaborative session. This could be a dry-erase board, or even those big sheets of cling paper so you can illustrate the concept. Try to illustrate a thought into a rough, but tangible visual concept. Using those illustrations as talking points will allow others to bounce ideas off of them. This will get a project off to a good start, and ensure everybody is seeing eye-to-eye on the project.

4. Be active

Physical activity will give your mind a break from the fast-paced workday and give your mind a chance to concentrate of something else or even think a project through. Take a walk outside, go to the gym and get your heart pumping.

5. Add variety to your daily routine

Stagnation is the incubator for stale/boring concepts. Keep your mind sharp by getting out of your daily routine. Try starting the day off with a walk, listen to a new band, draw a sketch, or read a book before you start your work day. This break in repetition will force your mind to work harder and open new channels of thought.

6. Focus

Turn that iphone off. Close the door. Close your IM-programs. Do not check email! Create a space where you can be creative and focus without being disturbed or having to worry about someone interrupting you.
Clean up your workspace so your mind does not have to focus on unnecessary things on your desk. Decorate your space in a way that makes you feel relaxed, centered, or however you want to feel to improve your creative process. You may also want to experiment with music and silence. I personally, have found that music boosts my creativity – music without lyrics seems to work best for me.

7. Practice

Creativity can come at the weirdest times, so keep a small sketchbook close by: in the car, on the coffee table, or by your nightstand. Grab the those ideas, layouts, or thoughts while they are fresh. Some ideas might actually be useful

8. Don’t Criticize Yourself

Sometimes your mind can feel threatened or frustrated and end up shitting down and withdrawing. Let ideas flow out, don´t try to censor yourself or worry about how silly the ideas may be while you are in design mode. It is important to keep your mind open when trying to generate ideas. It doesn’t matter if you work alone or in a group at work/school, you can sort the ideas later to determine which ones may be the best to use.

35 Inspirational Typographic Websites

Cool Homepages

BestHTML5Gallery

iLove Blog Design

A Web Gallery

CSS Align

35 Great CSS Websites

Free CSS Showcase

CSSclip

I will be spending the next few days, or weeks, testing out each app to find out which best suits my needs. I have heard a lot of good stuff about Gimme Bar, but have not heard a lot about Zootool.

Give us a follow or something on either site, here are our profiles: Zootool & Gimme Bar. Also, feel free to share your preference, or any other bookmarking site you prefer.

Web Design Infographics

How Would You Like Your Graphic Design?

All You Need To Know About Web Designers

The Evolution of the Web

What Beautiful HTML Code Looks Like

What Your Web Design Says About You

Web Designers vs. Web Developers

Graphic Design Infographics

Evolution of Typography

Graphic Designers Roadmap

So, You Need a Typeface

Do You Need a New Logo?

Nevertheless, the transition to responsive web design is still relatively new. So we, at Spark Creative, are going to  help you learn more about it – faster and easier. We put together a collection of Responsive Web Design Templates, Frameworks, and Guides we found useful, to get you started in making websites responsive.

Guides and Articles

Beginner’s Guide to Responsive Web Design

Content Choreography

Templates and Frameworks

1140 CSS Grid

Less Framework

Mobile Boilerplate

Skeleton

Tiny Fluid Grid

FitText

Here are a few examples of awesomely designed websites using responsiveness, check them out on different devices or change your window size while viewing.

CSS-Tricks

Google News SEO Factors

Trent Walton

Owltastic

8 Faces

If you can think of any more awesome responsive web designs, let us know in a comment.