Archive for 'Web Design'
20 New Creative And Unique Web Portfolios
Posted on 16. Jun, 2009 by Brian.
As web designers we always need to think about how potential clients are looking at our work and determining whether or not we are worth hiring. Having an impressive, clean, and more importantly, creative, portfolio is a great way to leave a good first impression on new visitors.
Need some inspiration to craft your own web portfolio? Just take a look at the 22 listed below and I’m sure that you will find something to help you along the way. Be sure to click through to each site to explore the fine details and different areas of each portfolio.
Enjoy!
For more web design tutorials check out the new tutorial site, The Tutorialist.
Continue Reading
30 Most Inspirational Light Web Designs
Posted on 08. Jun, 2009 by Brian.
I’ve seen a lot of focus on dark designs in the last few months – including my own site redesign and Elite Platinum. However, I still believe that a lot of inspiration can still be found in light designs – with their sleek and polished look, light web designs can be downright amazing. Here are thirty to get your creative juices pumping. Enjoy!
For more web design tutorials check out the new tutorial site, The Tutorialist.
Continue Reading
30 Most Inspirational Dark Web Designs
Posted on 06. Jun, 2009 by Brian.
After showing so much enthusiasm about inspirational light web designs, I thought it would be only fair to bring dark out into the spotlight. Dark web designs, when done right, can be mysterious, elegant, sleek, and professional. Here is a showcase of 30 dark designs that I feel match those criteria. I’ve done my best to feature as diverse of a selection as possible for your benefit. Enjoy!
Got your own favorites? Comment here!
For more web design tutorials check out the new tutorial site, The Tutorialist.
Continue Reading
30 Most Inspirational Designer Web Designs
Posted on 04. Jun, 2009 by Brian.
Alright everyone, I’ve really gotten into this web design inspiration series I’ve got going. After starting with inspirational light designs and moving on to inspirational dark designs, I just couldn’t stop. This is my third web design post in a row – so I’ll shake things up soon – but keep your eye on Elite By Design because I’ve got a few more great inspiration posts coming up.
Today, I’ve collected 30 web design of international web designers. It can be nice to see the pros at their best. I’ve gone with a wide range of designers – from large companies, to small, single person portfolios. Keep in mind that a lot of designers with beautiful sites have already been featured in my two previous posts – so check those out too! I hope that no matter what project you are embarking on, something here can help you out. Enjoy!
Radiiate (Under construction, but expect great things)
Elite By Design (can I do this!?)
Got your own you would like to add? Just comment!
For more web design tutorials check out the new tutorial site, The Tutorialist.
Continue Reading
50 Must-Read Resources For Incredible Web Design
Posted on 02. Jun, 2009 by Brian.
Web design has become one of the largest online fields with thousands of people pitting their designs against those of others every day. While the field is still young and growing, there are few designers who are recognized by all and have stood the test of time as their designs prevail over all others. Today, I want to share fifty must-read resources if you want to get started on the path of creating incredible web designs. Remember, beautiful designs aren’t made overnight – this is a process that takes time and practice. Don’t give up – instead, read on and find either a website, article, tutorial, or just some inspiration to help you take yourself and your business to the next level.
Sites
A lot of times, there are just a few sites out there in which every article is a must-read to learn more about web design. I’ve compiled ten of my favorite resources that I read every day to get my fill of design news, resources, tutorials, articles, and practices. Most of these you have probably heard of – some may be new – but either way, all ten of these sites deserve your visits and you deserve to read their articles. So dive on in!
-
Smashing Magazine – A site devoted to compiling resources for designers, Smashing Magazine is a great place to stay on top of the latest web design trends and news.
-
Noupe – Noupe is a web developer’s paradise of resources.
-
David Airey – An incredible designer, and a resourceful blogger, David Airey is a great place to learn about design, designers, and web design. That’s a lot of design!
-
You The Designer – YTD has been in my RSS reader for quite some time now – this information is simply too valuable to miss out on. Get a taste for the articles below:
-
WPCandy – WPCandy is a site all about WordPress, WordPress themes, and WordPress news. This resource is for all you WP developers out there!
- Sites – Inspirational collection of designs.
- The WordPress Starter Theme Project
- 10 (WordPress) Twitter Users You Should Follow
-
Fuel Your Creativity – An overall great resource for design in general, Fuel Your Creativity has an amazing and inspiring web design section that must be checked out.
-
WP Designer – WP Designer has been the starting point for many web designers and developers out there, including myself, so don’t pass up this incredible resource of knowledge.
-
Just Creative Design – JCD is another one of my favorite resources for web design articles and inspiration. Read a couple of articles and you’ll be hooked.
-
Fadtastic – Fadtastic is a web design trends journal that goes all-out and in-depth with web design.
-
A List Apart – Put quite simply by ALA, “For People Who Make Websites.”
-
Web Designer Wall – A beautifully designed website with some beautifully written articles, you can’t go wrong with WDW.
-
Net Tuts – If you’re a web designer or developer and you haven’t heard of Net Tuts, you probably shouldn’t call yourself a web designer or developer. Enough said.
-
Tracey Grady – My deepest apologies to Tracy, with whom I mixed up a link. Check out this incredible article: 10 Seamless Website Designs
Popular ArticlesInspiration
I’m a big fan of inspiration – from CSS galleries to news feeds, inspiration is everywhere and is never lacking in numbers. Here are ten inspirational websites to help you with your web design process and ability. I am no advocate of copying or replicating a website design, however there is nothing wrong with putting your own twist on someone’s work. So be a true designer – get creative!
-
CSS Remix – A fresh blend of the best designed web 2.0 websites.
-
Unmatched Style – Unmatched Style offers the ability to browse their designs by certain tags making it easier than ever to find what you’re looking for.
-
Kreativuse – A relatively new site, Kreativuse offers a regularly updated inspiration section along with several articles linking to great posts from around the design world.
-
Design Flavr – Design Flavr is a great place to read design-related articles while at the same browse through their inspirational site gallery.
-
Web Creme – A clean site dedicated to showcasing the best of the web.
-
Best Web Gallery – A CSS gallery with so many sites you’ll get lost in a matter of minutes. This is the place to come for endless inspiration.
-
Screen Fluent – With over 7,000 submissions, Screen Fluent is another place to lose yourself in the inspiration.
-
Screenalicious – Sporting almost 10,000 submissions, Screenalicious offers endless web design inspiration.
-
Full Single – The front page of Full Single offers a lone preview of one web design. To see dozens more incredible designs, just browse through the archives.
-
We Love WP – A CSS gallery that focuses on web designs running on the WordPress platform.
-
I Love Typography – A fantastic website for typographical inspiration on the web.
-
Fave Up – A user-driven website with inspirational sections on logos, business cards, and of course, web design.
-
Professional, Clean Hosting Layout – How to design a simple, clean, and professional hosting website design.
-
Making Your Own Portfolio Web Page – How to design a personal portfolio web design in Photoshop.
-
Tutzor – Tutzor shows us how they redesigned their website with this well organized PS tutorial.
-
Aqua Layout – A tutorial walking you through the process of designing a simple “aqua” style website.
-
Design Studio Layout – This is a great resource to show you how to design a layout that a design studio may use.
-
Real Estate Layout – As millions of real estate agents move online, it can never hurt to have the knowledge to design a real estate website.
-
How To Slice A Web Design – A video tutorial walking you through the process of properly slicing and dicing a PSD image into usable web design images.
-
Create A Sleek, High-End Web Design From Scratch – PSD Tuts shows us how to design a nice website design through this in-depth and thorough tutorial.
-
From PSD To HTML, Building A Set Of Website Designs Step By Step – Net Tuts walks us through the coding portion of building a very professional looking web design.
-
How To Create A 3D Shelf Element Similar To Dragon Interactive – PSD Tuts shows us how to create that sleek looking shelf element seen at Dragon Interactive’s website.
-
30 Most Inspirational Designer Web Designs
A post compiling 30 inspirational web designs from the designers themselves. -
30 Most Inspirational Dark Web Designs
If 30 is the new 20, then dark is the new light. This post is a compilation of beautiful dark web designs. -
30 Most Inspirational Light Web Designs
Here are 30 light web designs to get you inspired. -
What Does Your Website Say About You?
David Airey shows you what your website is really saying about you. -
Free Design Templates
Smashing Magazine brings us a collection of free design templates. -
35 Designers x 5 Questions
What happens when you ask 35 designers 5 questions? 175 quality responses. -
50 Designers x 6 Questions
The second installment of designing questions brings more practical web-design related questions to the table. -
10 Designer’s Checkpoints To Be Aware Of
Our last article from Smashing Magazine brings you 10 checkpoints that all designers should keep in mind. -
Footer Design Showcase
A fantastic collection of inspirational and creative website footers from around the web. -
What Everybody Ought To Know About Usability And Web Design
A great article explaining the importance of usability in website designs. -
A Design Is Finished When…23 Pro Designers’ Opinions
How do you know when a web design is finished? Here’s what 23 professionals have to say. -
30 Websites To Follow If You’re Into Web Development
If you’re this deep into the article, one would assume that you are into web development. If so, here are 30 sites you should follow. -
20 Blog Designs That Stand Out
Want to stand out among millions of sites online? See how others are doing it and how you can too. -
9 Common Reasons A Website Is Not Drawing Visitors
Having trouble getting visitors onto your site? Perhaps one of these 9 reasons can explain your troubles. -
20 Useful Tools To Make Web Development More Efficient
In the fast paced online world, time is money. So learn how to save time and earn more money! -
5 Excuses For Discrimination In Web Development
Are you discriminating against your visitors? It’s time to find out and right your wrongs. -
3 Key Prerequisites Required To Succeed As A Designer
We all want to succeed, but many designers lack these elements of success. Do you have them? -
Seven Reasons You Shouldn’t Charge By The Hour
Are you charging your clients by the hour? If so, you may be hurting your business and your wallet. -
11 Ways To Gain Exposure As A Web Designer
A fantastic post designed to guide you through the process of gaining exposure as a professional designer. -
53 Steps To Follow If You Want To Become A Freelance Web Designer
A list of 53 logical steps to making it as a freelance web designer and developer.
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Popular Articles
Tutorials
It can be great to read the articles and browse CSS galleries for inspiration, but none of that will do you any good if you can’t design in the first place! Here are ten tutorials to get you started creating beautiful website designs. Remember, it’s all about the journey – not the destination. Just because a final product of one of these tutorials doesn’t interest you doesn’t mean the tutorial is worthless. Complete each tutorial step by step and you will walk away from the process knowing so many new techniques and styles that you’ll be able to start designing your own websites.
Articles
Articles are the bread and butter of this post. I want to show you all some articles that will truly help you take your designs to the next level. From inspiration posts to guides, any of these articles can, and will, help you with the creative process of website design.
Got something I missed? Drop a comment and let me know!
For more web design tutorials check out the new tutorial site, The Tutorialist.
Continue Reading
How To Design The Perfect Form
Posted on 02. Feb, 2009 by Brian.
When your users have dedicated enough time on your website to be interested in your service or product, and want to learn more, there is no bigger turn-off than an inaccessible, unusable form. A form can be anything from a sign-up form, to an email opt-in form, to a contact form, and more. You want to make sure that these forms are convenient, easy to use, and of course, good looking, for any of these visitors that are interested in what you do.
In this post, I want to explore the countless tools and resource for designing forms, and I want to show you how you can use these tools to your benefit to create the perfect form that will help to maximize conversions, sales, subscribers or for whatever else you may be using your form.
Jump To A Section:
- What To Consider When Designing The Perfect Form
- Modern Examples Of Forms + Best Practices
- Contact Forms
- Web Forms: Tutorials And Resources
- Further Reading
What To Consider When Designing The Perfect Form
The following sections are meant to inspire you with new ideas to create the perfect form for your own website. Remember, each site has its own purpose and needs when it comes to forms, so while reading this post, keep your audience, site genre, and form purpose in mind.
I want to emphasize simplicity in this post – forms are all about making it as easy as possible for people to give you their time, their money, or their interest. If you have a complicated form that is hard to use, you will lose your readers’ attention.
Less Is More
When creating your form, remember that less is more. The fewer fields your visitors have to fill out, the more of them will actually complete the submission process. Let’s take a look at some online web forms to explore what makes them float or sink.
Facebook’s sign up form has only three main text input fields with two additional information objects (birth date and sex). This simplicity has made it easy for millions of people to sign up for their service.
On the other hand, take a look at MySpace’s sign up form.
First and foremost, this form is on an interior page meaning that users had to first visit the home page, then click “sign up.” Second, take a look at how big this form is – I counted fourteen information areas (including the CAPTCHA) for users to fill out. Fourteen! No wonder Facebook has already far surpassed MySpace (according to Alexa).
Even though Twitter’s sign up form is on an interior page of the site, I give them respect for making their form extremely simple and easy to fill out. With only four fields and a captcha, signing up is a breeze.
Context & Assistance
Forms can be made easier and more usable through the use of context and field assistance. What this means is that as you are filling out each field, the form is providing feedback to help you make sure you are doing everything correctly. The only true way to understand this is to check out the following picture:
Last.fm uses context assistance to help users identify when they have properly filled out a form. As you can see in the above picture, I got a green check mark for my username and passwords, but a red exclamation for my incomplete email.
These types of assistance save time and help users know that they are using your form correctly. Here are more examples:
Prominence On The Page
Even if your form is simple and easy to use, it won’t do you any good if your users can’t find it on your site. Having a prominent form, or a link to the form, is essential for streamlining the workflow of your visitors. Let’s take a look at some websites that have found places on their website that make it easy for users to find and use their forms:
WordPress puts a big button right to their sign-up form at the top of their site, giving it the most prominence, color, and attention.
Once a user clicks through to the sign-up page, the form takes up the entire screen. This form is big, easy to read and use, and simple. With only four fields to fill out, and a check box to click, it really is possible to have an account in seconds.
Netflix puts their trial sign-up form right on the home page, right where it counts. With only four fields to fill out, Netflix has made it extremely fast and easy for new visitors to get started on a free trial right away. This has contributed to the companies phenomenal success, having delivered over 1 billion movies.
Let’s compare this to Blockbuster who tries to offer a very similar service.
Take a look at their very content-heavy, image-overloaded homepage. So you want to sign up eh? Here are the options that they give you: a tiny link below the navigation and an image placed among advertisements on the right side. That’s it. Who do you think has more members?
Once you get to the registration form, you’ll find what appears to be a quick and easy form to fill out.
Distractions
Distractions can make or break a form. Ideally, once you have a user filling out a form, you want it to be quick and easy to fill out. The last thing you want is for the user to see another link of interest that takes them away from your form. These distractions often come when a website fails to optimize their registration page to reduce the distractions to a minimum.
When you are designing your form, keep in mind that you want people to actually finish filling it out. The fewer distractions that prevent them from doing this, the better. Often times this means getting rid of your sidebar, footer, and in some cases, a header, in order to give your form the most attention on the page.
Let’s take a look at Deviant Art. This website, normally packed with images and links, really cleans up its form page to remove any distractions, giving visitors straight, unblocked access.
A website that does similarly well in reducing distraction is Fresh Books. Stripping away every part of their website aside from their logo, navigation, and contact number, Fresh Books really puts emphasis on their forms to maximize registrations.
Windows Live follows suit by stripping away every link on the site and leaving only their logo and their form, front and center on the page.
Finally, Yahoo does a wonderful job of putting focus on their sign-up form for their mail service. Leaving only their logo and the form, users are pushed to complete the registration process.
Modals
Modals are a very new, and growing way, to build a unique, usable, and aesthetic form. A modal is a pop-up window that dims or darkens the background elements to reduce distractions and put maximum emphasis on the form. When done well, this method of form design will provide for a great experience for users and make registration a breeze. Let’s take a look at some websites, that are using modal windows to house their forms.
Reddit uses a modal window for both a login and registration form. Also keep in mind the ‘less is more’ rule when looking at Reddit’s form, which only has five fields.
The form on Hall Pass uses a very simple, minimalist modal form with only four fields to fill out! Not only does the form look great, but it is also very easy to use.
Meebo also uses a modal form. One minor thing that detracts from this modal window is the left half of the pop-up. It provides reasons for why people should be registering, but it is logical to assume that if someone has clicked the register link, they know why they want to sign up and what service they are signing up for.
Resources For Working With Modals
Modal Dialogues Using CSS & Javascript
jqModal : Minimalistic Modaling For jQuery
WordPress Plugin: SimpleModal Contact Form (SMCF)
Modals are a great way to work with forms, but be careful about your audience when using them. Older, less tech-savvy users may be less familiar with modals and might be inclined to think that it is some sort of pop-up advertisement.
Modern Examples Of Forms + Best Practices
To help you get ideas and inspiration for your own personal form, I’ve compiled a list of web forms organized by the type of site that they are on. When looking through these forms, keep in mind a few things:
- Simplicity – how many fields are required?
- Audience – who is the form targeted to?
- Prominence – where is the form on the page? Is it hard to find, or easy to see?
- Distractions – how much focus is put on the form?
Social Sites
Product Sites
Video Sites
Game Sites
Contact Forms
Contact forms get their own section in this post because they are different than any of the other sign up/registration forms that have been featured thus far. Contact forms serve a different purpose – getting in touch with someone – thus needing their own design style and rules.
Often times people figure that all a contact form needs is a few fields and a submit button. True, but why not be creative and try something different? Through the use of colors, icons, and other design styles, you can make your contact form stand out from the crowd and make it more usable and user-friendly.
Here is a collection of 20 beautiful and unique contact forms. While looking through these forms, keep the following in mind: color, layout, spacing, icons, text positioning, and the design of the submit button. Each of these elements help to make a contact form original and creative. Find a style that you like, and work with it to make it your own.
Web Forms : Tutorials and Resources
I have compiled a brief list of tutorials and online resources to help you get started creating the perfect form. Be sure to check out the online resources at the end of this section that offer great form creation for very low prices.
Form Development
A CSS Stylesheet Collection For Web Forms
Ajax Auto-Suggest Auto Complete Text Field
Online Tools
When writing this post, I consulted a couple of my Twitter followers to get their opinions on the use of forms in modern web design. I posed the question, “What is the most important element of design for a web form?” Here is what they said:
@Brendan_McNally – Getting it filled out>>.Striking the balance between too much information and true purpose or analysis.
@bryanzmijewski – Using fewer form fields will increase conversions (whether it be transactions, accounts or newsletters).
@WilhelmR – Context Popups with help/examples how to fill the fields. Kind of like those in in-text ads, but less annoying 
@Steve Moseley – I would say “readability” see the fields clearly and understand what to put where – I mainly employ white-space for this
@Aaron Is Here – The submit button. Why? If for no other reason then the fact that windows and mac default submit buttons look nothing alike.
@Kyle Roussel – I believe a form cannot be intimidating – i.e. everything “above the fold” and not spread over multiple pages.
Further Reading
Web Form Design Patterns: Sign-Up Forms
CSS Based Form: Modern Solutions
Web Form Design: Modern Solutions And Creative Ideas
For more web design tutorials check out the new tutorial site, The Tutorialist.
Continue Reading
How To Design The Perfect List
Posted on 19. Jan, 2009 by Brian.
Lists are a beautiful way to display content and information in a very easy to scan, easy to read method. Lists are found on most blogs to list posts, comments, tags, or links. In this post we will be exploring the modern practices of lists as an element of web design and I will be showing you how to design better lists to add to the overall design of your site.
Jump To A Section
- What Is A “Good” List?
- Showcase Of Lists In Modern Web Design
- How You Can Make Beautiful Lists Too
- Further Reading
What Is A “Good” List?
So what makes a list “good?” Is it the color? Spacing? Background? Style? In truth, it is a mixture of all of these things. Without one element, a list may suffer in terms of usability and aesthetics.
Lists are simple in their form – simply putting one excerpt or one line of text below another. If your lists become overly complicated or lose their simplicity, you will have lost the essence of the list and will lose your visitors’ interest as well.
I find that looking at lists in their best form is the most efficient way to get inspired, get ideas, and start thinking about how you want your lists to look. There are thousands of ways to customize a list using varying typographic elements, colors, spaces, images, icons and more. Let’s take a look at some well designed lists:
Showcase: Lists In Modern Web Design
This list is very simple in style and form, but gains its uniqueness from the fact that it rests transparent against the background of the site.
Readernaut’s list works because not only is it clean, spaced, and legible, but it also provides additional information about each list item (in this case, the number of entries a person will find when they click a link).
Version App maximizes on the ’simple’ look of a list – a bright title and a one sentence descriptor. This list is great because of the integration of icons to help visitors visually navigate through the site.
This list is very similar to Version App’s in that it uses a bright title, descriptor, and icons. The difference is in the layout and the background upon which the list rests.
Name Birdie’s list is more of an instruction area to help people get started in using the site. The list uses large numbers to help people follow the pages in the order they are designated. Large, bright icons also add to the aesthetic appeal of this list.
Concentric Studio really made their lists fun to use by adding an ‘up-and-down’ scroll feature. This, combined with large thumbnails for each list item, makes browsing their links easier than ever.
The Future Of Web Apps offers an introductory paragraph to the list above the links to help explain what the links below mean and where they will lead.
Obama uses his list to gain support on various social networks such as Facebook and Myspace. Using white icons that color over on-hover, the list makes it very clear where each link will go to when clicked.
All Top wastes no space with their content-oriented list. This works to help people find the right link in the shortest amount of time possible.
Bright titles with descriptions, combined with white space separation and the inclusion of star-icons on each list item makes this list very versatile and usable.
Very simple, very clean, and very readable, Bellingham goes for a 2.0 look by utilizing subtle gradients and bevels to add depth and structure to the list.
Just one of the few lists we’ve seen thus far that use underlined links, You The Designer uses bright, contrasting colors to help set their list apart.
Pen and Think highlights their links with a nice background to add contrast. Coupled with descriptors and category tags, this list is very content-heavy without sacrificing legibility or scannability.
One of the most visually attractive lists I have seen to this day, Real Mac Software uses beautiful and elegant icons to help illustrate the idea behind each list item. Added with simple typography and bright links, this list is incredibly easy to use.
The combination of subtle dividers and the clever use of white space makes this a clean, easy to read, and visually appealing list.
The ability to scroll horizontally between different dates to load different lists makes this element of Parkview Baptist’s website really stand out from the crowd.
The top of Salient’s list uses subtle tabs to fit the most amount of content into the smallest space on the site possible. Add in dividers and small icons for visual cues of each list item and this list is not only pretty, but very usable as well.
Combining all of the elements used in most of the previous lists, bold titles, descriptions, dividers, icons, and the use of white space, makes Fetch Apps’ list beautiful, usable and readable.
Gabbo uses beautiful hover effects on their list to make navigation easy and elegant for users.
This is unique in that it uses bright boxes around list items at the top to highlight the most important items, while less-important items have a normal background with bright text.
UTK effectively uses white space and typographic subtleties (bolding and italicizing) to create an easy-to-scan, easy-to-read list.
To maximize readability of a white text list on a dark background, Squawk Design effectively uses the combination of icons, bold headlines, and more subtle descriptions to create a great list.
Bright Box alternates the background color of every other link in the list to create great visual separation and to make each list item discernible from one another.
With beautiful hovers on each list item, Bilet is able to make it easy for visitors to know which link they are reading about and where each link will take them. This is essential to maximize click-throughs and conversions.
What would an inspiration post be without some Apple love? Apple brilliantly uses ‘iphone app icons’ to help illustrate how each link will be related. This is genius in helping iPhone customers learn how to use each app in the iPhone: clicking on each item in the list in the same way they would tap the app icon on the device itself.
A beautiful typographic mixture of serif and sans-serif fonts, mixed with the effective use of white space, and topped off with beautiful hover effects, The Big Noob really nails this list on the head when it comes to looks and usability.
Book Tagger’s list is unique in that it serves the purpose of displaying the different tags being used on the site. Each list item varies in color and size based on the amount of times the tag has been used in each article.
Elliot’s site uses transparency to create a unique feel to the site. Each list item is widely spaced and uses dividers to add visual separation. With a transparent, green hover on each list, this is beautiful and user-friendly.
How You Can Make Beautiful Lists Too
Each list above is unique and beautiful in their own unique way, but the real question is how can you create your own lists for your own site with your own style? If you took time to read the descriptions of each list, you will certainly have noticed very similar elements found in each list:
Color
A great example of the use of color in lists comes from Wal Mart’s union list. They use a bright and bold background to highlight the most important items in the list, while less-important items are nested below in a prominent, but not as noticeable location.
This example shows how color can be used in lists as more than just an aesthetic element – instead they can be used to help draw readers’ eyes to information that may be most relevant to them. Conversely, the lack of color can also be used to draw attention to a list hidden amongst bright backgrounds and busy content.
See Colour Pixel:
Spacing
The effective use of white space is also a critical element of a list when it comes to legibility, scannability, and down-right good looks. Sure, in some cases, the lack of white space just works. However, consider this the exception, not the rule.
By spacing out the different items of a list, it becomes easier to read, easier to understand, and is certainly less of an eye-sore. For ideas of what spacing works, see a couple examples below:
How To Make Your Lists
CSS is a great way to space out your lists. Use the following code in your CSS to help space out the items in a list. Adjust the margin size according to your own preferences:
ul {
list-style: circle;
}ul li {
margin-top: 15px;
margin-bottom: 15px;
}
This CSS code will add a 15 pixel margin to the top and bottom of each item in your list. For more on styling lists with CSS, take a look at the list style property.
Dividers
While white space can easily double as a divider, it never hurts to have some sort of visual element to help separate items in a list. This can be achieved by a simple dotted line, a solid line, or an image. Borders are easy to create using CSS:
ul {
list-style: circle;
}ul li {
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #000;
}
This code will create a one pixel, solid black border 5 pixels below each item in your list. For more tips and tricks on creating borders with CSS, take a look at the CSS border property.
Typography
Typographic changes can make all of the difference in the world when it comes to being able to quickly and efficiently scan a list. Using a bold or bright title helps each list item stand out in a crowd.
A few great examples are PSD Tuts and Squawk Design.
The following are a couple more examples. Take care to notice how easy it is to discern where a new list item starts based simply on typographic differences.
Again, with a little bit of HTML and some CSS styling, this is very simple to do. Take a look:
The HTML
<ul>
<li>
<a href=#>Link 1</a>
<p>Description goes here</p>
<li>
<a href=#>Link 1</a>
<p>Description goes here</p>
<li>
<a href=#>Link 1</a>
<p>Description goes here</p>
</ul>
The CSS
ul {
list-style: circle;
}ul li {
margin-top: 15px;
margin-bottom: 15px;
}ul li a {
padding-bottom: 5px;
color: #313131;
font-weight: bold;
}ul li p {
padding-top: 5px;
color: #7a7a7a;
}
Mine looks like this:
Icons
The final element to take in consideration when designing your lists is the inclusion of icons or images with each list item. Icons can be aesthetically appealing, add visual cues to readers, and help distinguish each list item from one another. Adding icons is surprisingly simple, again, using the power of CSS.
To add a nice check mark next to each item in my list, I simply need to add the following CSS:
ul {
list-style: none;
}ul li {
margin-top: 15px;
margin-bottom: 15px;
padding-left: 30px;
background: url(images/check.png) no-repeat 0pt 3px;/* You will need to upload your own ‘check.png’ file for this to work */
}ul li a {
padding-bottom: 5px;
color: #313131;
font-weight: bold;
}ul li p {
padding-top: 5px;
color: #7a7a7a;
}
Mine looks like this:
The above is a very simplified version. Of course there are ways to play with embedding icons, moving them around, and getting them to interact more with the list. For now, however, the basics should give you an idea of how to proceed in a way that’s best for you and your site.
When writing this post, I consulted a couple of my Twitter followers to get their opinions on the use of lists in modern web design. I posed the question, “What is the most critical portion of an unordered list? Spacing? Color? Typography? Other?” Here is what they said:
@zgordon – Padding and then creative use of background images.
@Corey Freeman – For me? pullet point icon
@Aaron Is Here – Spacing – If the spacing is problematic the <ul> will not look like a <ul> . I wonder how twitter will d isplay the <ul> code.
@Build Internet – I’d say spacing, with a close second to typography.
@Chris Coyier – Depends on the context entirely? All of the above.
@Arbenting – I would say spacing. Color, type ect can really enhance a ul but the spacing is what really sets it apart.
@Chris Barnett – In my opinion spacing is the most important. Followed by typography.
@Mike Van Hoenselaar – The semantics have to be right to use ul/li. Furthermore I would say that spacing is most useful. Especially on the left.
@Jimmy Gleason – Spacing and the bullet point style/image.
@Chris Spooner – For standard ULs I’d say spacing, when using a CSS reset you need to restyle the indentation and line height for readability.
@ZSquared – I think the spacing has a major impact on how well the list will present itself. That goes for the whole page layout – IMHO.
@Sour Apple Media – Spacing.
@Ryan Downie – Spacing, you need to separate the list’s content from surrounded content.
After reading through these responses, you will notice that spacing is the most mentioned element of a good list. Be sure to keep your lists spaced and separated from your content for maximum impact.
Further Reading
5 Ways To Set Your Unordered Lists Apart
Using CSS And Unordered Lists To Do Just About Anything
For more web design tutorials check out the new tutorial site, The Tutorialist.
Continue Reading
Using White Space Effectively In Web Design
Posted on 12. Jan, 2009 by Brian.
Jump To A Section:
- What Is White Space?
- How To Use White Space Effectively
- White Space In Modern Web Design
- Further Reading
What Is White Space?
Put simply, white space is the space between different elements of a design – the area between text, images, paragraphs, headers, footers, links, etc. It is the space between different elements on a page, the space between letters, and the space between lines in a paragraph.
White space allows for easier scanning of a website. It reduces the amount of text visitors see all at once and makes reading much easier. It allows for the visual separation of design elements without adding any new elements such as visible lines or boxes. It is clean, looks professional when used correctly, and gives a site an uncluttered and fresh feel.
White space is sadly one of the most underrated elements of a strong web design. Just because it isn’t shiny or glossy doesn’t mean it isn’t important or essential to a website.
To start our exploration into this subject, let’s take a look at a couple of websites that are using white space effectively in their design.
1. Made By Sofa
Made By Sofa creates a strong design message by using a large image at the top of the site with content and navigation below. Sofa works with white space to separate three elements: titles, paragraphs, and tagline. Take a look at the following close-up:
Note: Shaded areas represent white space
This creates an organized and separated feel making it easier for readers and potential clients to scan their website quickly and efficiently.
2. Information Architects
Information Architects creates a clean and uncluttered feel on their website by using white space to separate their logo, text, paragraphs, and headings. The following image is a close-up of the Information Architects website.
Note: Shaded areas represent white space
How To Use White Space Effectively
Using white space effectively can be tricky business. Here are a few tips to get you started:
1. Line Spacing
The white space between lines in a paragraph makes all the difference when it comes to readability and scannability on a web page. If the lines are pushed too close together, it becomes nearly impossible to scan. If the lines are spread too far apart, your words will begin to float apart and feel disconnected from one another.
Line Spacing Is Too Close
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien. Vivamus sit amet velit ut lorem luctus facilisis. Suspendisse potenti. Vestibulum augue turpis, ultricies quis, scelerisque id, pellentesque ac, ligula. Integer ullamcorper. Pellentesque facilisis. Nunc iaculis mi sodales elit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In blandit rutrum felis. Etiam malesuada.
Line Spacing Is Too Wide
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien. Vivamus sit amet velit ut lorem luctus facilisis. Suspendisse potenti. Vestibulum augue turpis, ultricies quis, scelerisque id, pellentesque ac, ligula. Integer ullamcorper. Pellentesque facilisis. Nunc iaculis mi sodales elit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In blandit rutrum felis. Etiam malesuada.
You want your line spacing to be just in the middle of the above two examples – not too much, not too little. For information on controlling your line spacing with CSS, read this article on the CSS line height property.
2. Margins
A margin is the space around a particular element in a design. CSS Margins are a great way to control this space to your advantage. When working with margins, there are a few things to remember:
1. Consistency
Keep your margins consistent throughout your layout. The more consistent the spacing, the more organized and a professional your site will look. When thinking of margins, think in both vertical and horizontal separation, as both have an effect on the overall design.
2. Not Too Much
Don’t make your margins too large. Too much separation can make a website feel disconnected, as seen in our line spacing example above. Also keep in mind that there are only a certain amount of pixels that can fit on a screen, so don’t waste too much screen real estate on margins (unless of course the context of the site calls for such margins).
3. Not Too Little
Remember, we’re learning about white space here, so be sure that there is some! It looks shoddy to have text pressed up against a picture, sidebar, header, navigation bar, or any other element of a design. Keep these spaced out to give your readers room to breathe.
3. Minimalist Does Not Equal White Space
One of the problems in the modern design world is that too many people equate white space with minimalistic. That is just plain wrong. A site can be packed with content, but be very easy to scan and read with a clever use of white space.
Take Smashing Magazine for example. This is a website literally overflowing with content, yet they have managed to make their site easy to scan and read. They were able to achieve this through a careful selection of colors, text sizes, and the use of white space.
Upon closer examination:
Notice how there is visual separation between text and images, between navigation elements, and between the content and the sidebar? This is the effective use of white space.
4. Headings
Headings are a great way for you to separate your content into manageable chunks. By reading this article, you are seeing four different types of headings in use: H1, H2, H3, and H4. These headings are the large, bold, underlined “section headers” that you have been seeing throughout this post.
What you need to look at is the white space above and below these headings, and how they influence the scannability of this post. For example, my H2 tags (the second largest headers) have a 5 pixel separation between the text and the underline. They also have a 15 pixel margin above and below the text. This creates white space to help organize and section the content.
By creating this white space, it becomes much easier for readers to scan through the post and identify which bullet or which heading they would like to learn more about, rather than digging through twenty paragraphs of solid text.
If you’re interested in the CSS used to create my H2 tag, simply copy and paste this code into your style.css file:
h2 {
font-size: 28px;
padding-bottom: 5px;
border-bottom: 3px solid #2a2a2a;
letter-spacing: -1px;
color: #2A2A2A;
margin-top: 15px;
margin-bottom: 15px;
}
5. Images
The separation between images and text can make or break a design. If the words are too close to the picture, the content will become very cluttered and hard to read. If the words are too far from the picture, the post becomes disconnected and loses its flow.
On Web Design Tuts, I use a special class of images to help organize my posts and make them as visually attractive as possible. Whenever I write a post, much like this one, I use the following code for an image:
<img class="imagelist" src=# />
To style this image class in CSS, I did the following:
.imagelist {
border: 5px solid #cacaca;
margin-top: 15px;
margin-bottom: 15px;
}
Notice how I have kept my margins a consistent 15 pixels in both my images and headers?
White Space In Modern Web Design
You now should be aware of why white space is needed: to clean up a site, make it easier on readers, and to appear more professional. You should also have a couple ideas of how to effectively use white space using consistent margins, text separation, and the visual separation of images and headers. However, you may still be wondering what a “good” use of white space really is.
Here are some examples of websites that effectively use white space to help communicate their message to their visitors.
1. Surfstation
Observe how the use of white space has effectively separated the content from the sidebar on Surfstation’s website. It is this separation that helps visitors scan the website, picking out information that is relevant to their own needs.
2. Jason Santa Maria
Jason’s website uses a wise combination of lines and white space to help present his content in a clean and elegant manner.
3. Digital Mash
Digital Mash, the website of Australian designer Rob Morris, utilizes a very simple design with a navigation, main image, and four content areas at the bottom of the page. Notice how the margins are consistent and the copy is very readable through the spacing of text and the use of headings and icons.
4. Odd Web Things
![Home [at] Odd Web Things](http://www.quicksnapper.com/files/1577/1993431092495ABC02BD326_m.jpg)
As a type-based website, Odd Web Things uses white space to separate their logo from their sidebar, their sidebar from their portfolio, and their portfolio from their blog.
5. Vitor Lourenco
Vitor’s site uses an all-white background with some typography here and there. A bold navigation, strong links, and simple color scheme make this website work.
@Twitter On White Space
When writing this post, I consulted a couple of my Twitter followers to get their opinions on the use of white space. I posed the question, “Why do you think white space is important in web design?” Here is what they said:
@Brendan – Whites space! I think it is critical in getting focus = conversion and it exudes confidence & professionalism when done well.
@Brandon – So that information and design elements can relate to each other properly, rather than blending in to a big mess of graphics.
@sthursby – When all you have is a couple seconds to entice a visitor into your site, you want the important info easily findable.
@Hyermish – White space gives the illusion of simplicity; sometimes helps to reduce clutter.
@Drew Douglass – My main reason would be to draw focus to a certain element on the page, and to leads eyes through the content.
Further Reading
On White Space In Graphic Design
CSS: Typography And White Space
For more web design tutorials check out the new tutorial site, The Tutorialist.
Continue Reading
User Link Feed
Please submit your resources at Elite By Design. Elite By Design provides more traffic for your submissions!