By Tim Mercer

Pixel art was brought to the mainstream with the release of gaming consoles in the early eighties. Those 8-bit graphics we all loved back then often evoke feelings of nostalgia and take us back in time. Nostalgia aside, pixel art is a beautiful art form on its own that many of us have come to love. With so few pixels to work with, pixel artist’s have to make each one count.

Today we present 40 Examples Of Eye Popping Pixel Art from some of the best pixel artists around. Be sure to check out their sites for more of their amazing work.

Beautiful Pixel Art

R Grillotti
Grillotti uses every pixel perfectly in this rendition of The Birth Of Venus.

Another pixel masterpiece from Grillotti’s model series.

I love these large pixel paintings. Each pixel must be place just right to get the desired results.

Snake
This piece is full of detail and has great shadowing.

Great lighting and vivid colors make this one a standout.

Autumn Pixels
This stunning beauty shows the artist’s mastery of the pixel art form. It has very smooth form and shading.

It’s almost hard to believe this is pixel art with its soft textures.

Lief
This image was created using only eight colors.

Ryan-GFX
This little scene looks like something straight out of the old 16-bit video game days.

This isometric design of Mr. Burns’ casino is complete with a parked limo.

Sven Ruthner
This one reminds me of an Andy Warhol painting with its bright colors and faces.

This piece has awesome character design and charm.

Jamon
The misty atmosphere and low angle of view make this one great.

Endigo
This one has an unusual color pallet and lots of attitude.

Paul Robertson
This one has lots of Sega characters and a cool background.

Another piece from Paul full of action.

Army of Trolls
This one’s got everything from Papa Smurf to Mario. Can you spot Link from Zelda?

Rod Hunt
Great concept and use of color.

Another solid concept for Rod. Robots controlling a larger robot from inside.

Derek Yu
This one gives a whole new meaning to gorilla warfare.

A great design of a mechanical monkey.

Flip Flop Flying
The large pixels give this piece an impressionistic feel.

Seven Heavens
This piece takes pixel art into the third dimension. Dig Dug never looked so cool.

Another trip into 3D. This time it’s Galaga.

Eboy
Eboy is well know for its pixel art and you can see why in this one below.

This awesome little pagoda is full of the Eboy charm.

This piece was for a Coca-Cola advertisement. You can spend a long time exploring all the details.

Tim
This isometric design is just awesome. I love the 3D quality it has.

Another great piece from Tim. It’s like a 16-bit Robinson Caruso.

Tomec
The Blues Brothers look awesome in pixels. The purple highlights make me imagine a nightclub just off to the right.

This fantastic Monkey Island piece has a really cool transition from night to day.

Gunstar Red
This is a mock-up of a video game. Check out the pixel patterns use to make the gradient in the background.

Another great mock-up from Gunstar Red. Great cartoon style.

Bugpixel
This isometric building has enough details to keep you looking for quite a while.

The texture and shading on this balloon are just amazing.

Tom Schieter
This piece is loaded with details. Notice the water splashes and little fish.

This wonderful visage looks great with its muted tones.

Fool
Awesome character design and excellent textures make this one a favorite.

This one by Fool is simple stunning. The atmosphere, concept, color pallet and details are truly inspiring.

Another great character full of whimsy and charm.

Further resources

Create your own pixels with the pixel toy.
Check out a pixel map of Hong Kong.
Pixel art tutorials to get you started.
Pixel art forum and galleries.

  

As designers, we often focus on the practical aspects of design above all else. We focus on what works, with little regard for why it works. And in our day-to-day work, that outlook serves us well. It lets us get our work done in an efficient, professional manner, and generally nets good results.

But spending some time on the theory behind the graphic design principles we use every day can expand our design horizons. It can open up new avenues of creativity and experimentation that can lead our designs from just good, to fantastic. On that note, below are 50 excellent resources and articles that discuss graphic design theory, including layout, color theory, and typography. Feel free to share additional resources and articles in the comments.

General Design Theory

There are a lot of general design theories and principles out there that apply to all forms of design, whether in digital or print mediums. These include things like balance and scale, as well as more abstract topics like emotion and what makes for “good” design.

The Principles of Design
This article from Digital Web Magazine covers the basics of design theory, including balance, rhythm, proportion, dominance, and unity. It’s fully illustrated and makes each principle easy to understand.

Graphic Design Theory?
This article from the AIGA archives offers a broad discussion of graphic design theory, offering guidance for designers on a host of topics, including their place within the current DIY culture.

How Good is Good?
This article from Typotheque talks about good design in relation to what the design is for, especially in relation to non-profit causes. There’s a heavy dose of ethical considerations here, as well as some practical information on what makes a good design.

Can Graphic Design Make You Cry?
This article from Design Observer discusses the question, “How…could you make design that communicated to human beings and deliberately drain it of all human content?”

Ten Graphic Design Paradoxes
This article discusses ten of the most common statements or opinions about graphic designers (or said by graphic designers) that are contrary to accepted wisdom. Included are things like “For designers, verbal skills are as important as visual skills,” and “I’m a professional: I know best.”

The Lost Principles of Design
An illustrated guide to the basic principles of graphic design. Included are explanations of balance, contrast, emphasis and subordination, directional forces, and proportion, among others.

The Laws of Simplicity
This article is actually excerpted material from the book of the same name by John Maeda. It covers ten basic principles to guide simple and minimalist designs.

Dudes and Dolls and Design Decisions
This post by Jacob Cass discusses the psychological differences to consider when designing for men or women. It’s a practical discussion of what women respond to versus men, as well as how to effectively design for both.

The Complexity of Simplicity
This article discusses how complex simplicity can actually be, including perceived versus actual simplicity.

Want to Know How to Design? Learn the Basics
This article discusses the most basic principles of graphic design, including color, shape, scale and size, and space, among others. Additional resources for each are also included.

C.R.A.P.: The Four Principles of Sound Design
This article from DailyBlogTips offers up information on four basic principles of good design: Contrast, Repetition, Alignment, and Proximity (C.R.A.P.).

Classic Graphic Design Theory
Don’t let the design of this site fool you; the content contained here offers a great overview of classic graphic design principles, like shape, texture, movement, balance and unity.

Simplicity is Highly Overrated
This article discusses simplicity and the idea that it’s not actually what consumers want.

Layout Principles

Layout principles and theories are varied, but most fall into one of two camps: grid-based design and non-grid-based design. Each one has its adherents, and each one has its advantages and disadvantages. There are also layout principles like white space and proximity to consider, all of which are discussed below.

The Grid: The Structure of Design
This post discusses grid layouts, mostly in relation to newspaper design. It discusses both horizontal and vertical grids, and can easily be applied to other graphic design projects, including website design.

Fundamental Design Principles for Web Page Layout
This article covers a design layout principles based on the Golden Ratio and divine proportion. It offers both theory and practice related to implementing the divine proportion in your site designs.

Designing With Grid-Based Approach
This post covers grid design in theory and practice, with examples, quotes about grid design from well-known designers, and a number of additional resources.

Five Simple Steps to Designing Grid Systems – Part 1
This is the first in a series of posts from Mark Boulton on grid design that delves into both the theory behind grid-based design and practical application of that theory.

Grid Design Basics: Grids for Web Page Layouts
This article discusses the principles behind grid-based design, as well as offering basic instruction for incorporating grids into your designs.

Seven Smooth Steps to Superb Grids
This post gives step-by-step instructions for understanding, developing and using grids for page layout. Also included are additional resources for each step.

Thinking Outside the Grid
This older article from A List Apart discusses why it’s sometimes a good idea to step outside the grid, and how to actually do so.

On Grid Design
A brief commentary on grid design from Warpspire, including why most so-called grids in web design are nothing more than integer-based symmetry, and aren’t really “grids” at all.

Grid-Based Web Design, Simplified
This article discusses both the practical application of a grid-based layout and how it can be integrated directly into your workflow, but also some basic theory behind grid design.

Why I Hate Grid Systems…
This post from SoyRex discusses the shortfalls of grid design and what it means to the design industry. It’s an interesting take on how grid-based design can lead to formulaic designs and devalues the industry.

Canons of Page Construction
This Wikipedia article discusses the principles in the field of book design called the canons of page construction, that deal with things like margins, proportions, and type areas. While written specifically for book design, they can easily be applied to other areas of graphic and web design.

Negative Space
This article from Layers Magazine talks about the importance of negative space in designs, including multiple examples.

Whitespace
This article from A List Apart by Mark Boulton discusses the importance of whitespace (negative space) and how to achieve it. He also talks about why whitespace is important in terms of legibility.

White Space: How to Get it ‘Right’
This post from Carsonified talks about how white space is important to web design, and how to achieve proper levels of negative space in your designs.

The Principles of Good Web Design Part 1: Layout
The first post in this series offers some great information about the theories behind good website layout, including white space, flow, and alignment.

The Principle of Proximity in Web Design
This post talks about proximity and how it relates to effective layouts. Visual hierarchy, grouping related elements, and white space are all discussed.

Color Theory

Color theory can often be one of the most intimidating aspects of design. Sure, most of us know what looks good, but do we have any idea why? And what about those designers who aren’t as comfortable with their color palette choices? The resources below discuss color theory as it relates to graphic design, and specifically to web design.

Learning to Use Color on Your Web Site
This post gives a brief introduction to color theory, with specific information for color theory online. It’s a good starting point for anyone completely new to color theory.

Choosing Color Combinations
This post from Veerle’s Blog offers up a pretty comprehensive view on how to create color schemes, including a crash course in color theory.

Color Theory for the Color-Blind
This article from Digital Web Magazine offers up tips for designers who are color-blind. It also includes a section for non-color-blind designers for designing for those who might be color blind.

A Look Into Color Theory in Web Design
This post from Six Revisions covers color theory in direct relation to web design, including color meanings and a gallery of websites and commentary how they use color.

Color Theory for Designers, Part 1: The Meaning of Color
The first part in my 3-part series on color theory. This article covers the meanings of the different colors, as well as examples of how each color is commonly used in web design. Part 2 covers color theory concepts and terminology, and Part 3 discusses how to create your own color palettes.

Simple, Practical Color Theory
This post from Tutorial9 covers the basics of color theory, including color models; harmony; term definitions; and hue, saturation and brightness. It’s well-illustrated and gives a great overview of how color theory relates to design.

Typography

Typography is one of the most important aspects of graphic design, whether in the digital or print worlds. And with the thousands of typeface choices out there, it can also be just as intimidating as color theory to a lot of designers. The resources below can help improve your understanding of what makes good typography and what doesn’t.

Compose to a Vertical Rhythm
This post from 24 Ways talks about the importance of vertical rhythm in relation to typography, as well as offering a number of practical tips for implementing vertical rhythm in your own designs.

The Principles of Beautiful Typography
This post from SitePoint focuses mostly on typography in relation to website design. It discusses the basics of different methods for including fonts on your site (including web-safe fonts and sIFR), as well as the anatomy of a typeface and other related topics.

Basic Typographical Principles
A brief article that covers some very basic typography principles. While it’s a bit of an older article, the information it contains is still relevant.

Type IS Sexy
The Type IS Sexy website offers up a complete lesson in basic typography. Everything from the anatomy of a typeface to special characters and the rules of good typography. And it’s all presented in an easy-to-understand, interactive format.

dot-font: Seven Principles of Typographic Contrast
This article is derived from Carl Dair’s teaching of visual contrast in relation to typography and how it makes the meaning of a design immediately apparent. Principles covered include weight, form, and size, among others.

Five Simple Steps to Better Typography
This series of posts from Mark Boulton covers the basics of better typography, covering Measure, hanging punctuation, ligatures, size and weight. It’s a very thorough guide to improving your typography designs, all laid out in a simple to understand format.

The Type Studio / The Written Word
This page offers links to a number of articles on typography, including PDF versions of archived fy(t)i (For Your Typographic Information) columns. These cover individual typography topics in detail, for both online and offline applications (including pull-quotes, visual alignment, bullets, and emphasis, among more than 30 others).

The Elements of Typography Applied to the Web
This is one of the most complete web typography guides out there. It’s still a work-in-progress, but already covers things like horizontal and vertical motion, rhythm and proportion, and the etiquette of hyphenation and pagination.

15 Tips to Choosing a Good Text Type
This is a comprehensive guide to the things one should consider when choosing a typeface for body text. Included are tips about letterforms, weight, axis, x-height, and letter spacing.

On Web Typography
This article from A List Apart by Jason Santa Maria explores choosing and pairing fonts on the web, particularly in relation to the expanded options @font-face provides.

Setting Type on the Web to a Baseline Grid
This is a practical, how-to article from A List Apart, written by Wilson Miner, on how to set your web typography to a baseline grid. Examples and code are both given, making it very easy to follow.

Clagnut Typography Archive
Clagnut’s typography category archive is filled with great information on typography spanning the past eight years or so. Articles talking about theory, news, and technique are all included.

Choosing Type Alignments for the Web
This post from Astheria covers the benefits and drawbacks of justified and ragged (both left and right) type alignment on the web to help you decide which is appropriate for your projects.

Know Your Type
This article by Red Labor discusses typographic inspiration and choices based on slightly different criteria than many other articles. It talks about clarity and utility, scale, and type as a design element of equal importance to graphic elements in a design.

10 Principles for Readable Web Typography
This post covers ten important considerations for creating readable web type. It also covers a number of typographic techniques and how to incorporate them to make more readable web pages.

  

By Robert Bowen

There is a season for all things, and this holds true in the world of web design too. Naturally with the technologies and languages evolving at the rate that they tend to, not to mention the evolution of our own personal skillsets, we find new design doors opening up before us all the time. Given that this is the way of things the time will undoubtedly come, delivered by one of the aforementioned evolutionary paths or be it even some other reason altogether, that we will decide it is time to redesign our website.

It is usually never a comment on how we felt about the previous design that we had, it is simply indicative of our desire to keep things fresh and up to date. Now as you climb aboard the redesign bandwagon, there are many helpful resources, articles, and even a few checklists that are already waiting to assist you scattered throughout the internet. We have decided that not only are we going to round-up all of those handy helpers into one post for easy access, but we are also going to go over a few things that you want to keep in the foreground of your mind, so they do not slip through the cracks of forgetfulness.

The forgetfulness can be an aggravating roadblock that can easily throw barriers in your way on your path to the redesign. There are so many areas that we have to make sure we cover during this reimagining of the site, that without maintaining a comprehensive redesign checklist you may inadvertently skip one or two of them. Leaving areas of the site unaltered, and given the depth of the redesign, possibly ineffective. Again, this is not necessarily a comment on one’s prowess as a design professional, it simply demonstrates how many cracks there are for these minor elements to fall through.

Consider some of our past articles

• Redesign: When To Relaunch The Site and Best Practices – A post from the Smashing archives that talks about timing your redesign just right, and much more.
• Redesigning Craigslist With Focus On Usability – Another great Smashing post that looks at usability focus when redesigning using Craigslist as an example.
• Whitehouse.gov Redesign: The Change Has Come – Another look at redesigning in action from Smashing with a breakdown of the White House’s new design.

So below we have some of the things you will want to take into consideration when you take on this process, also areas to keep in mind. Furthermore, we have a collection of useful posts and resources that you will also want to keep close by when you are beginning to redesign your site. We hope that it helps.

Think of Your Readers

The first and overall most important consideration to keep in mind when redesigning is your readers. Now user interface and experience are always supposed to be a major focus in any design, but here we are more talking about your established readers, not just every user. The main difference is that when you are talking about every user you are talking about the sites intuitive navigability and interfacing. When you are talking about your established readers you are talking about the experience they have come to expect from your site and the way they expect it to be delivered.

And for the consideration of your readers, you want to be sure that your redesign is not so drastic that it completely breaks from the delivery and interactiveness that they are used to. This could inadvertently alter that comfort zone they have established with your site over time, and could in fact cause them to surf on to more what they feel are more welcoming waters. So always keep your loyal audience in mind when redesigning, and perhaps show your consideration by consulting them through a post on the site before the redesign, or even via social media, to find out what changes they would like to see.

As far as the interactiveness of the site goes, pay attention to the areas that draw in your readers, and those areas where they are the most active. Then as you begin redesigning you know that these are areas either need to remain consistently engaging or be beneficially upgraded, but they should not be considered expendable or regarded as unimportant. Any changes made in those areas should be made with care and thoughtful consideration of the readers who help give your site purpose.

Use a CSS Framework

Just in case you were not using one to begin with, you may want to consider a way to make your redesign go a little smoother and perhaps a even a little quicker by creating and using a helpful CSS Framework. As far as solid foundations go for building on top of, frameworks are an extremely useful tools for developers in order to ensure that they get off to a firm start, already aimed and headed off in the right direction. Frameworks are the basic beginnings to styling your design, and in your redesign process, why not go ahead and give yourself a leg up right out of the starting gate.

Now everyone who uses a framework, more than likely, either has one of their own that they have developed or tweaked, or they are using a basic framework that has been built and offered to the community. Either way, you have already skipped ahead in getting your styling in order, and now thanks to the framework, your basics are already in place. Now naturally depending on the direction you are going to be taking your redesign, your framework needs may vary from what you have constructed in the past, or what has already been made and given to the community. This does not mean that a framework would not be useful, only that you will have to piece a new one together.

Given that, this may or may not be a route that you have available to take in your redesign project, but if you do, there are numerous benefits to using a CSS framework including the time and headache that it can save you. And once again, the redesign process can have enough headaches and also be frustratingly time consuming, so any time we can save ourselves any small bit of that, we need to take it. It keeps us from hitting that breaking point of sorts wherein the redesign loses its fun and appeal, and simply becomes work.

Checklist Theme Changes

Another thing to keep in mind if you are doing a redesign for a client who was previously using a pre-constructed theme, is that you are going to want to take specific note of the areas that were handled by the old theme. Perhaps a further step that you should take to ensure nothing gets overlooked is to create your own checklist of elements and options that the new design will include that the previous theme did not. This can keep these areas in focus so that their alteration will be guaranteed, not taken for granted.

For example, if your client’s previous theme included threaded comments and the new design does not, you need to be aware of this. Otherwise, you are going to have to do some special altering to your code to ensure that when the new design launches the past posts with threaded comments suddenly do not have a jumbled, unfollowable mess in the comment section. Since this was already styled and handled by the theme they were using previously, we may not even think about how the new design covers these areas, or more importantly, if it even does cover them.

So if you are going to be redesigning for a client who has been using a pre-constructed theme as their base from which you now have to build, then as you redesign you may want to go ahead and begin making a checklist of the differences between the theme and your design so you know where to look for possible needed fixes and minor tweaks to keep things consistent. While in the beginning this may seem like a time waster, it should more be viewed as a potential headache avoidance system, that makes for a smoother user experience in the transition, and not one riddled with bugs to be sorted. Remember consistency of experience matters to your established audience and that should not suffer because of the redesign.

Avoid Unnecessary Bells and Whistles

Since we are tossing old sayings about, another one that we should keep in mind as we redesign is the one that goes, just because we can doesn’t mean that we should. And what we mean by that is with consistency mattering the way it does, you want to try and air on the side of simpler rather than opting for something a bit more unnecessarily complicated. Sure we want to add some razzle and a touch of dazzle to our design as we rework the site, but we do not want to take things so far from away from the original that we lose the feel, and what’s worse, the appeal of the site.

One of the reasons we tend to redesign is because our skills have grown and we want to flex that creative muscle to show off some of what we can do now that we were unable to make happen in the past. However, if this new addition comes at the cost of the user’s experience in any way, then you have to ask yourself just what purpose does it serve? The bells and whistles are great when we can work them subtly into the site without them becoming obtrusive or a hindrance to your readers, but if their inclusion works against you and your readers, then those little extras need not make the final cut.

Yes, it is always nice to be on the forefront of the evolving web, but it has to be done with style and grace, and perhaps a dash of humility. If you begin loading your redesign down with a bunch of cumbersome frills just to show how far you have come in honing your skillsets, then you are risking unnecessarily interfering with the purpose of your site and straying farther from that purpose. You are making the site and the design more about ego and less about function and form, wherein the message you are hoping to transfer with your design becomes jumbled and possibly even lost.

Revisit the Mission

Once upon a time when your site first began, it had a mission. The site had a decided purpose and a direction that it was crafted to follow. As you begin the redesign process, you may want to also revisit the intended mission of the site and see if you still intend to pursue that same direction. If you find that you have altered your course along the way, which is quite common given how much we grow and change over time, then you may find that you need to adjust your design accordingly to better reflect this change in course.

What better time to make this new direction known and solidify it by saying it boldly with your site’s new look? Use this opportunity to align your site’s voice more with your own, and lock in this revised mission as you move forward and break new ground. Naturally you can undergo this evaluation process and make this sort of mission change whenever you want, but when you redesign your site, people are already going to be taking time to check around the whole site looking for any and all changes that you made so they are more likely to notice this new direction and see where you are planning to take things.

You also want to be sure that if you do change your mission, that it does not so drastically turn from what it was originally that it is no longer a recognizable version of itself. If that is the case, then you do not need a redesign for the site, as much as you just need a new site dedicated to that purpose. The redesign should be a new facade for the design and the direction, but they should remain in the same area as their predecessors. If it does not feel like the same site when it is all said and done, then it will not keep the same readers that it once did.

Don’t Break the Brand

Having a brand for your site and business works for you in so many ways that you want to be sure that you do not disrupt or break the brand in any way with your new design. It is rarely a good idea to alter your brand, which iconically becomes linked to you and your site in the minds of the masses (which really is the point of the whole brand in the first place) so changing it on a whim just to suit your redesign could be more costly than expected. Remember, consistency is important, and when dealing with a brand, doubly so.

Redesigns are one thing, re-branding is something else entirely, and you need to be keenly aware of which you are attempting to do. Branding goes ever so much deeper than you design does for your site and your business, so be sure that you are not inadvertently altering more than you intended to with the reworking of your site’s appearance. Redesigning can be done on a whim, generally with little to no harm being done, but a brand is so much more involved that it takes a lot of thought and effort to effectively re-brand.

So if your redesign is intended as a re-branding or just an initial branding, then you will want to take extra care and time to craft a version fitting of everything that you want the brand to embody. It now has to say much more than it did before, and this should never be undertaken lightly. But if this was never the intent of your redesign, then build around the brand and work it fluidly into the new site, not the other way around.

Don’t Forget the Small Stuff

For years the saying has echoed throughout, don’t sweat the small stuff. And though in the scope of the big picture it is good advice, it may have accidentally created a set of unintentional blinders with regards to the small stuff. Wherein, no matter the situation we find ourselves in, we keep focused on the main goal, and let the little stuff around us be blocked from our sensors. However, when you begin redesigning these blinders need to come off so that our radars pick up on all the minor elements that need to be included, not simply forgotten about until we have uploaded the supposed finished new look and our users have to call our attention to something we missed.

Favicon

When speaking of the small things, it really doesn’t get much smaller than the favicon, so be sure that you do not let its size allow it to be missed as your ever watchful redesign eye searches the site. Depending on how drastic a change your look undergoes in your redesign, it may be necessary to tweak your site’s favicon as well. Having all of these bases covered further helps to cement a professional reputation for your site and you as a designer, so make sure that things like the favicon, the minutiae of your site, stay current and to date with your redesign.

Custom Default Gravatar

If you have a blog attached to your site and in your comment section you use a custom default gravatar for those commenters who do not have their own, then you will also want to tackle that minor element and not let yourself forget it until post-launch. This one is often overlooked because of the fact that it has to be written into your functions, or in this case, re-written. Redesigning can be tedious and tiresome at times, but you cannot let yourself get lazy in your work and not see to as many details as you can before you hang your banner of accomplishment and go live with the new look, so see to your functions and get those gravatars changed over too.

Broken Link Check

Another task that you can tackle when doing a redesign is to scan through your site and make sure that all of your outgoing links are still up and active, not linking to a site that has long since fallen from the landscape. This helps your redesign stay fresh and remain current as well. This may also lead to a little necessary alteration of some of the content on your site to work around these possible link losses, but that can also afford you an opportunity to find new links and content to fill any of these gaps left.

Tools of the Redesign

Below we have gathered up several redesign tools that can help ease the headaches that can commonly be associated with this overhaul process.

• Blueprint : A CSS Framework – A great place to start for your CSS framework. Get ideas for your own starting points shortcut.
• 960 Grid System – While you are redesigning if you need some quick references for your column dimensions, then 960 has got you covered.
• Find the Perfect Colors for Your Website – A fantastic resource collection from Vandelay Design on selecting the right colors for your web project.
• 8 Essential Tools for Website Redesign Efficiency – Visual Swirl collected a handful of helpful tools together for all those walking the redesign walk.
• Website Redesign Kit – is a helpful free download that includes a short booklet and a video about redesigning your website with marketing in mind.
• Freelance Folder’s 7 Fresh and Simple Ways to Test Cross Browser Compatibility – An awesome post from Freelance Folder that provides a collection of sites and services that test for cross browser compatibility for your website.

Further Resources

Let us keep this redesign enthusiasm going with a handful more of extremely helpful resources all geared towards taking on this type of comprehensive re-imagining of a website.

• Preparing and Planning for a Redesign – Web Designer Depot’s take on getting everything in order for your redesign project.
• Redesign Process: Taking Small Steps for a Better Website – 1st Web Designer offers some redesign advice from the everything in moderation school of thought.
• 21 Factors to Consider Before a Redesign – Vandelay Design gives you a pretty comprehensive list of things to think about before you take on the redesign.
• Considering A Site Redesign? 5 Tips To Get You Focused – SitePoint gives you 5 tips that will help you get focused when you are considering a redesign.
• Website redesign checklist – An in-depth checklist from Apt Media Inc to go through whenever you are redesigning.
• How To Redesign Website And Not Screw Up Your SEO – Local SEO Guide tells you in this useful post on how to maintain your SEO through your redesign.
• Know How To Plan Your Website Redesign & Get Inspired – Another post from 1st Web Designer about effectively planning your redesign along with a dose of inspiration to boot.
• 10 Tips to a Successful Website Redesign – University Business has an article that offers some advice on successfully redesigning your website.
• Things to ask before you redo your website – Speaking of advice, Seth Godin thinks it is a good idea to ask yourself this list of questions before you begin your redesign.
• Fresh vs. Familiar: How Aggressively to Redesign – This is another great post that talks about redesigning and just how far to stray from the familiar.
• Redesigning Your Own Site – A List Apart has a fabulous look at redesigning your own website that is definitely worth a read.
• Website Redesign Checklist: SEO 101 – SEO-Scoop offers this checklist for redesigning that you may also want to keep handy during your process.

  

By Cameron Chapman

We’ve all seen articles devoted to the various web desing “rules” out there. In fact, they’ve probably been drilled into all of our heads ad nauseum. And for many, they serve as a comforting set of guidelines that make our lives easier, at least when it comes to design.

But what about those occasions when you have an idea that doesn’t quite fit in the rules? Or what if you’re just sick and tired of doing everything by the book and you want to challenge yourself creatively? Are the rules really set in stone?

The answer to that is of course not. For one thing, a lot of the rules are outdated. So while they might have been true at one time, they’re not anymore. The other thing is that there are almost always circumstances that demand that the rules be bent or broken entirely. And as designers, we need to learn to recognize those times.

Below are a bunch of commonly-accepted web design rules, along with the reasons you might want to break them, and how to do so effectively. We’ve also included examples for each and the one unbreakable rule.

Your Web Page Layout and Design Should be Consistent Throughout the Site

Consistency can help make your visitors feel at home on your site right away. This makes them more likely to look around and spend more time there. Comfort is a good thing. Most of the time.

But there are two problems with this rule. First, some designers interpret it to mean that every page should be virtually identical. They use the same basic template for every page on your site, regardless of the content present. This almost always results in a site that’s boring and no fun to look at.

The other problem is that different content often calls for different design treatment. Removing most of the consistency on your site can make for a much more interesting user experience. Note that I said “most” of the consistency, though. You’ll want to choose one or two anchor points to keep your visitor from feeling like they’re visiting a different site entirely every time they go to a different page. Consider keeping either a design element like your header or color scheme or something as simple as your logo the same on every page on your site.

Case in Point: Jason Santa Maria

Jason Santa Maria’s website uses a different page design for a large number of his articles. It’s refreshing and shows just how much thought he puts into the content he provides. At the same time, it’s worth clicking through to multiple posts just for the designs alone. Always a good thing if you’re looking for deep engagement from your visitors.

The unifying element that keeps you feeling like you’re on the same site is the top navigation.

Don’t Put Important Information Below the “Fold”

The “Fold” is a holdover term from the world of newspaper design. In newspapers, it referred to the area in the top half of the front page. This was the area of the paper that was visible if it was sitting at the newsstand. The most important news and headlines for the day were located there to entice people to buy the paper.

But here’s the thing: websites don’t really have a “fold”. It’s often touted that the area visible on the home page without scrolling is above the fold, but that’s not an accurate translation. With a newspaper, that above-the-fold area was important because it enticed people to purchase the newspaper. With a website, there’s no decision like that necessary. Visitors are already on your site and scrolling isn’t the same kind of psychological decision as handing over money to purchase something.

Case in Point: Sibley/Peteet Design

Most of the space “above the fold” is taken up by the header image. You have to either scroll down or click to see more.

Avoid Using Too Many Different Fonts

The theory behind this rule is that too many fonts make a page look cluttered and unorganized. And the improper use of too many fonts can result in an amteurish page at best, and a nearly unreadable one at worst.

But there are plenty of ways to use multiple fonts and create a gorgeous and usable website. The keys are to pay careful attention to the fonts you’re using and the sizes and weights you’re using them at. Use fonts that have similar weights, x-heights, and other related characteristics. Be careful about mixing too many colors or styles.

If you’re not comfortable using multiple fonts, you can always cheat and use mutliple weights and styles of a single font. This is an easier technique that results in a very similar look, especially if you use a font that has a wide variety of variants (like Georgia or Times New Roman). Mixing italics, bold, small caps, all caps, and different sizes can result in a varied look that’s still unified.

Case in Point: The Dollar Dreadful

The Dollar Dreadful site uses tons of fonts. There are well over twenty just on the home page. But the overall effect is impressive and works well within the theme of the site. It definitely wouldn’t be as striking if limited to only one or two fonts.

Keep Everything Simple

Simplicity is overrated. I’m sure that single statement already has half of you up in arms and ready to stop reading. Simplicity has its place. But there are times when you want something to be complex. To be multi-layered. And there’s nothing wrong with that. Chances are, your visitors are intelligent enough to figure things out if you still design with them in mind.

There’s nothing wrong with keeping a website simple if that’s what you (or your client) wants. But don’t hold simplicity up as some kind of holy grail of web design. There are plenty of instances where a more complicated solution is better, and ultimately more usable, than a simple solution would be.

Case in Point: Aussie BBQ Legends

The home page for Aussie BBQ Legends is anything but simple. With plenty of content, animation, and a disorganized by easy to use navigation system, combined with a large background image, it creates a multi-layered and complex impression while still being easy and fun to use.

Put Navigation in Expected Places

Tradition tells us that navigation should be placed either in the header or the (left) sidebar of a website. Secondary navigation is often placed in the footer, but never primary navigation.

Why? People only look to those places because they’ve been trained to do so. But there’s a lot more space available on a web page that could be used. And if done well, those places can be just as easy to use as navigation in the header or sidebar.

Case in Point: No One Belongs Here More than You

This site not only doesn’t put navigation in the expected places (it’s in the lower right-hand corner of the page), it also uses linear navigation. You can only go where the site’s creator wants you to go.

Avoid Bright Background Colors

The idea here is that bright background colors make it difficult to read text placed over them. But with appropriate contrast and font size, text can be nearly as readable on a bright background as it is on a white or other neutral background. It all comes down to making appropriate choices for the design.

Case in Point: Helveticons

The Helveticons site has a very bright yellow background, but the use of a dark gray font makes everyone on the page easy to read.

Limit the Information on Each Page

The theory behind this one is that people don’t like to read long articles. They want bite-sized information when they’re online. Breaking up your content over multiple pages will supposedly help satisfy this desire.

But that’s not always the case. Sometimes a visitor is seeking more detailed information. Clicking through to half a dozen different pages to find information that could have just as easily been placed on a single page is just a waste of time. Instead, break content up with headers or similar elements to make it easy for those who are just looking for one piece of information to find it without making things more difficult for those who want to read the entire thing.

Case in Point: Wikipedia

Okay, so Wikipedia might not be raking in the design awards, but it does have a huge amount of traffic and excellent user engagement. Some articles are short, but others might run a few thousand words (or longer). Wikipedia combines on-page navigation to major sections and headers, subheaders, and lists to create an excellent user experience that still puts a ton of information in a single page.

Focus on Lower Page Weight

This rule comes from the days when a large number of Internet users were connecting over a dial-up connection. Nowadays, you’re going to find a lot more visitors are coming to your page over a broadband connection. And even those still using dial-up are probably used to have sites take ages to load.

Lower page weight is still important, though, to an extent. You still want your content to load in a matter of a few seconds for the majority of your users. But this can be achieved just as easily through good coding as purely by page size. Simple steps like specifying the size of images within a post or page can help make the page more usable even before it’s fully loaded.

Case in Point: MWP

The Modern Web Projects (MWP) site has lots of big images, mostly in the background. But it pushes the page size well over a meg. And yet the page still loads just fine on a broadband connection and the size is well worth the effect.

Don’t Use Big Background Patterns or images

This one ties closely to the previous rule about page weight. I’ve seen sites that advocate that your background pattern should be less than 60 pixels square. But with high-speed internet, that’s not really necessary anymore.

Another argument against big patterns is that they can be distracting. That can be true of small patterns, too. Instead, just make sure the pattern you’ve chosen to use complements the rest of your site and doesn’t detract from your content. Sometimes giving the background a bit less contrast or making it lighter or darker can help in this without changing the overall look too much.

Case in Point: McClanahan Studios

The background image for McClanahan Studios is huge. There’s literally one image for the entire background of the home page. The same is true for each page on the site. And yet the background not only doesn’t slow down the loading of the site, but also contributes a ton to the feel of the design.

Don’t Use Splash Pages

Splash pages and intros are often created for absolutely no reason other than to show off the designer’s Flash abilities. These types of splash pages should be avoided at all costs. But that doesn’t mean there’s never a place for splash pages.

Sometimes a splash page that’s intended for a particular type of visitor is in order. Let’s say you’re a charity trying to get donations for a very specific project. Instead of changing your entire home page and site design, why not throw up a splash page that invites people to donate? It’s simpler than changing your home page and often times it’s more effective.

This rule might have been more accurate if they’d said not to use splash pages without a very good, very specific reason. (And, “because I want to” isn’t a good enough reason.)

Case in Point: Kutztown University Communication Design Department

This splash page serves to simplify navigation for new visitors. Since education websites traditionally have a ton of content for many types of visitors (current students, prospective students, parents, alumni, etc.), simplifying the visitor’s first experience is helpful and an appropriate use of a splash page.

Always Incorporate Social Media

This is another rule that a lot of you are probably ready to defend to the death. But the truth is, not every site is going to benefit from incorporating social media functions.

Let’s say, for instance, that you’re designing a site for a product that treats an embarrassing personal problem. Do you really think anyone is going to share a link or an article on Twitter? Are they going to post a link to a site like that on their Facebook wall? Probably not. So there’s really no point in spending the extra time to incorporate social media options.

Case in Point: Preparation H

No one’s going to share a link to this on Twitter, so why even bother giving them the option?

The Three-Click Rule

The idea that every page on your site should be accessible from your home page within three clicks is one of the most pervasive rules out there. In extreme versions, it’s not even from the home page, it’s from every other page on your site.

This rule was invented to make designers more carefully consider their information architecture. Which is a good thing. But that doesn’t mean that visitors are never going to see a page just because it would take them five clicks to get there. The key is to use links and navigation to direct users in a way that makes them want to keep clicking.

Information should be easy to find. But that doesn’t mean it needs to be instantly accessible. One tip, though, if you’re going to use deeper navigation: include a prominent search box for those people who are too impatient to use your regular navigation options.

Case in Point: Barnes & Noble

Large online retailers are a great example of where the 3-click rule falls apart. If you go to the Barnes & Noble site to browse, it’s virtually impossible to get to any specific category within three clicks. And unless the book you’re looking for happens to be featured on one of their main pages, it’s unlikely you’ll get to a book within three clicks either. But B&N has excellent search funcionality, which means you can find whatever you’re looking for if you’re in a hurry, without sacrificing the ability to browse categories in a very intuitive and user-friendly way.

The Unbreakable Rule

Your user should always come first. Whatever rules you’re thinking of following or breaking, always ask yourself if it’s going to help or hinder your user. If you keep their needs and preferences in mind, no matter what rule you break, your site will still likely be successful within your target demographic.

Sources and Resources

• 5 Basic Rules of Web Design by Grantastic Designs
  A simple set of rules for website design, most of which are entirely accurate.
• 10 Web Design Rules That You Can Break
  A great post from Webdesigner Depot that offers up examples of effective rule-breakers.
• Ten Rules of Web Site Design
  A list of rules from Sharpened Productions.
• Web Sites that Work
  A list of rules from Roger Black on what makes a well-designed and usable website.
• Four Crucial Web Design Rules
  A post from NichePhile on four important rules for good site design.
• 15 Websites That Break The Rules
  A great gallery of sites that break at least some of the so-called rules.

  

By Mike Takahashi

It is reasonable to assume that most users have a display resolution higher than or equal 1024×768 pixels. As display resolutions continue to increase, there has been a steady trend of websites that have employed full body backgrounds using large images.

However, many of these designs use images that have a set resolution for its width and height. Once the resolution is exceeded by users who have larger a display resolution, the design fails to scale properly. The following are two examples of websites viewed on a display resolution 2560×1440 pixels.

Carfreaks

Jirnsum

There has been an emergence of websites that have been employing techniques to create scalable full body backgrounds. These designs have the advantage of being able to scale to any display resolution. When done correctly, they can create a seamless design for users regardless of their display resolution. We’ll take a look at two different techniques that can be implemented. One is Flash-based and the other is CSS and JavaScript based.

Flash

Flash-based websites have continued to improve since its early days of adoption. Its support is now wide-spread across all browsers. However with the emergence of mobile phones such as the iPhone, compatibility can still be an issue. While still not the ideal solution for usability and accessibility, many of today’s websites designed in Flash are slowly improving. Google has also greatly improved their ability to index Flash-based websites.

HBO
HBO is a 24/7 pay-television service that has been able to successfully integrate captivating images from its movies and shows into the design of their website. The use of large images helps complement the site and create a voice and identity for each of its movies and programs. Even though the website is Flash-based, most of the sections also contain unique URLs, which can be bookmarked.

Moviecity Pack
Moviecity Pack is a Latin American pay television super premium channel. The website is similar to HBO and implements a heavy use of images within its design layout.

EwingCole
EwingCole’s website is very content heavy with several layers within its design. The use of powerful imagery and overlays help create a unique look and feel for its company.

Werkstette
Werkstette’s navigation structure is quick and almost too fast within its transitions. It creates a rushed atmosphere for the site, however its images are striking and beautiful.

Carlos Alonso Bodas
Carlos Alonso Bodas uses his photography as the central focus for his portfolio of work. The dark design elements within the website give it a very technical look and feel.

Final Cut
Final Cut is a cutting-edge creative editorial company, which services clients in the commercial, television, feature film and music video arenas. The site uses a grid-based layout of images to show its array of creative clients.

Maud
Maud is a design studio based in Australia. The design layout uses images from its portfolio of work as the background of the design while overlaying accompanying text for its navigation and content.

Soren Rose Studio
Soren Rose Studio integrates its portfolio of work within the design of the website. It uses a horizontal fixed navigation overlay that slides in and out to let its images deliver as much context as possible.

Pageboy
A very simple and clean website that selectively uses images and white space to create a minimalist boutique feel.

Brook Pifer
A simple design with left hand persistent navigation. The portfolio of images are shown in a photo book style layout.

Signal7
Signal7 creates unique 360 degree layout that pans left and right as you navigate to different areas of the site. The interactive feel of the design helps keep the user engaged and interested in what is going to happen next.

Gilly Hicks
Gilly Hicks is a lifestyle brand from Abercrombie & Fitch that has an online presence selling its apparel. Its use of high quality images and tone fits the brands identity of a high end apparel company.

ZOEtee’s
ZOEtee’s website incorporates a lot of white space into the design and layout. It makes use of Flash with transitions and navigation that change from one section to the next.

Nature Valley
Nature Valley’s design creates and very earthy tone. The design is fun and playful, yet it doesn’t overwhelm the user with too many unnecessary elements.

rw/2 Studios
rw/2 makes use of fully scalable images and unique overlays to create visually dynamic site. The photography section is a nice example of using scalable images within the design of a website.

Auberge de l’ill
Just looking at the images that over take the entire page inspire you to make a reservation to this restaurant. The design and layout create an immediate sense of desire and intrigue. The navigation is styled so that its impact is as minimal and unobtrusive as possible.

Shinichi Sato
Shinichi Sato’s website looks very minimal at first glance. However, once you start to navigate around, you begin to see the intricate and refined details that accompany his photography.

CSS and JavaScript

CSS and JavaScript compared to Flash-based websites are much more user friendly in terms of usability and accessibility. By using a combination of CSS and JavaScript, websites can be made to look and behave very similar to Flash-based websites.

Aedas
The Aedas global network provides consultancy services in architecture, interior design, master planning, landscape, urban design and building consultancy in Asia, the Middle East, Europe and the Americas. Another website that looks Flash-based, but once you look into the source code you won’t find any. The design and layout of this website incorporates several layers and multiple navigation points to create a design that complements its use of heavy imagery.

Solegiallo
Solegiallo’s use of clean vibrant images with circular design elements and rounded corners gives this website a very sophisticated aesthetic. The use of subtle tones in color help complement the images that are cycled through. The navigational elements are placed well within the scale of the design layout.

Radim Kurka
Large type and the use of block elements give this website a very structured feel. The color themes used within the design also translate through to the images which incorporate similar color palettes.

Serial Cut
Serial Cut’s website is similar to Auberge de l’ill with one big exception. It doesn’t use Flash. A good example of comparing two different sites that "appear" the same, but are completely different underneath.

Grodd Reklam
Grodd Reklam uses only a single page for its website. The large type and color contrast bring immediate attention and focus to the content. The overlay allows the type to be readable, while still being able to give the image context within the design.

Noon Solar
Noon Solar’s site uses a unique navigation style. When hovering over its products, images are shown as a small preview when hovered over. Upon clicking a product, large images and white space are used to show the details of each product.

Mike Takahashi Photography
On my own site I implement a minimal approach to design. The photographs are the central showcase. The use of opacity on the navigation elements and content areas allow the images to take more space and give it a fuller look.

dua
dua’s site uses a scalable horizontal layout. Instead of having images that scale on both the x and y axis, the horizontal layout allows the design to have images that are much smaller in resolution.

Resto Hull
Resto Hull is an Italian restaurant that uses a similar layout to GOTOCHINA. The navigation is static and persistent through the entire layout of the website.

Hills & Dales Estate
Hills & Dales Estate’s website has a deep architectural feel to it with its use of warm colors and gradients. As the layout continues to scale up, the main body content is always centered.

Coba Hair
Coba Hair is a hair salon that uses striking images of hair styles as the central theme of its website. The layout is a combination of text and content placed around the site in a block like fashion, which inhibits a very structured feel.

Virgin Racing
Virgin Racing creates a very strong and defined look. The balance of dark and bold colors is complemented by the use of striking images and large fonts.

Firefly Photography
This photography studio’s website incorporates a cascading style layout. As you navigate further into the site, the levels transcend using overlays which open out into the central photography of the site.

Marina Yachting
The use of full scale images helps to convey the lifestyle brand of Marina Yachting. The color palette used helps create a warm tone that doesn’t obstruct the overall design.

Rebecca Barry
Rebecca Barry’s website uses images from her body of work which are used to set themes for each section.

Alexandra Owen
Alexandra Owen’s website uses a carousel effect for its collection of images that are fully scalable. The site is minimal and uses her collection as the main focus of attention.

About the Author

Mike Takahashi is the Web Strategies Manager for Communications & Public Outreach at UCLA (University of California, Los Angeles). He is passionate about every aspect of design and how technology can help influence our lives in meaningful ways. You can follow him on his blog at TAKA DESIGNS.