BlogmyQuery – BMQ

This is not a normal Smashing Magazine post. I’m not going to teach you something new or inspire you with examples of great work. Instead, I want to encourage you to complete a Web design challenge. I believe this will help to address a weakness that exists in many of our design processes.

If you complete this challenge, it will make it easier for clients to sign off on your designs, and it will improve the quality of your work.

So, what are we waiting for? Let’s get started.

The Challenge

If you’re like me, you did some form of higher education in art and design and will know about “the crit.� These meetings involve the class coming together with tutors to analyze and provide constructive criticism on each other’s work.

These were terrifying meetings in which I justified my design approach and defended it against criticism. Although I hated every minute of them, I believe they nurtured one of the most useful skills I have as a Web designer.

The ability to logically justify our designs is a skill many of us lack. This is the heart of the challenge I wish to lay down.

My challenges is this:

Write a blog post justifying the design approach you took to one of your websites. Then, encourage other Web designers to provide feedback and ask questions.

Admittedly, this might sound like a lot of effort, so let me explain why it is worth your while.

Why This Challenge Is Worth Undertaking

As I said in a previous article, being a great designer is not enough. You can produce outstanding work and be the envy of your peers, and yet struggle to convince clients of your approach. The reason is that clients do not understand design the way your colleagues do. Therefore, you need to be able to articulate what makes your design right.

Our ability to justify our choices is crucial to our relationship with clients. Without it, clients will lack confidence in our abilities or, worse, feel excluded from the process. A lack of confidence leads to micro-management, and exclusion leads to frustration and resentment. Therefore, explaining our approach is vital.

However, it isn’t just about the client. It’s also about your personal development. If you don’t have a clear idea of what works, then improving will be difficult. Design critiques are as much about improving the quality of your work as justifying it to others.

Unfortunately, this requires that we overcome two barriers.

First, many of us don’t fully understand why we have designed a website a certain way. We design at a subconscious level, based on years of experience. When you have been driving for a while, you cease to think about the process of driving. Likewise, design decisions are often handled at a deeper level than the conscious mind.

Secondly, many designers haven’t had to justify their approach in the past. Either they haven’t gone through the rigorous critiques that I experienced in university or they don’t have the experience required to articulate their decisions.

It is for these reasons that this challenge is so valuable. By writing a blog post about a particular design and encouraging feedback, you move your decisions from the subconscious to the conscious level and gain valuable experience in articulating them.

Of course, knowing where to start such a challenge can be a challenge in itself.

Where To Start

If you are not used to thinking about design at a conscious level, then you might struggle to begin. While there is no right way to do this, I can share the approach that I use.

When discussing my design with others, I tend to look at the various components that make up the product. These usually are:

• Grid,
• Layout,
• Color,
• Typography,
• Imagery,
• Styling.

Ask yourself, why did you approach each of these elements the way that you did? Let’s consider each in turn.

Grid

Why did you use that particular grid structure on the website you are reviewing? Can you articulate your reasons for using a 12-column grid instead of a 16-column one? What about the margins and padding? If a client complained that there was too much white space between columns, would you have a response?

Another common issue is when you purposely break out of a grid. Was the choice intentional, with good reasoning, or just an impulsive decision? What would you say if the client asked about it?

The choice of grid might be based on the content or on the constraints of the style guide. It could have to do with making the website work on mobile devices or with allowing flexibility for future changes. Whatever the reason, you need to be able to clearly articulate them to yourself and the client.

Are we selecting a particular grid because it is right for the website or just because we have fallen into the habit? We need to be able to justify our approach to our clients and ourselves.

Layout

Layout and grid might sound the same, but they’re not. By layout, I am referring to white space and the placement of elements on the page. These are often points of conflict between the designer and client, so being able to explain your approach is important. For example, how would you justify all of the white space that Google has chosen to use on its home page?

Why did you leave so much white space on the page? Was it to draw the user’s eye to a particular element, or perhaps to improve readability?

What about the positioning of elements? Why is the search box in the top-right corner? Is it because this is the convention and people look for it there, or perhaps because you wanted to associate it with other elements that are in proximity?

Color

Color is probably the most controversial of subjects, and so we need to understand our motivation. I tend to approach color selection in one of four ways:

1. Corporate branding guidelines
   The palette has been defined by the guidelines, and I work within these constraints.
2. Theory
   I use a tool such as Kuler, which produces a palette based on established theory.
3. Emotional response
   The extensive research done on people’s responses to colors informs my palette.
4. Main image
   If the website has a dominant image that has already been approved by the client, I use it as the basis for the color palette. There are great tools for extracting color palettes from images.

Adobe Kuler is just one of many tools that help you apply color theory to your palette selection.

By explaining your choices in these objective terms, you prevent color from becoming a matter of personal preference and thus avoid conflict.

Typography

Something as seemingly simple as typography consists of many different decisions. These decisions extend far beyond the selection of typeface and encompass line height, size, weight, kerning and much more.

With services like Fontdeck making so many fonts available to us, the need to understand and justify our choices is more important than ever.

You need to be able to speak confidently about your choices if you are to demonstrate your expertise and convey that what you do is a lot more complex than it might appear. Taking the time to explain the complexity behind your typographic decisions might sound boring, but it will impress. It will also force you to put more consideration into your choices.

Imagery

To many clients, imagery is merely about subject matter. But we know it is about much more. We select imagery based on the mood it sets, the colors it contains and even things such as the eye line of the person in the photograph.

We need to be able to articulate these decisions so that others recognize that you cannot easily substitute one image for another without significantly affecting the design.

Do you know why you selected one image over the thousands of others in your library? What made that image special? Can you explain this to yourself and the client? Was it really more than a “That’ll do� decision?

Styling

For me, styling refers to screen elements that are not directly content-related: buttons, links, call-out boxes and the plethora of other elements that need to be decided on.

How you style these elements can dramatically shape the feel of the website. From the chrome buttons on Apple’s website to the sketched buttons of Moredays, styling can make a huge difference.

Styling dramatically shapes the feel of your website. But can you justify why one approach is better than another?

Can you explain why your styling creates the right feel? Have you shown the client alternative approaches? Did the client sign off on moodboards, which set the style? If so, refer back to them when justifying your design.

Reference Material

In fact, whenever justifying a design, always refer to the material that has already been agreed upon. For example, if the client has signed off on moodboards, we should use these to justify our choice of typography (“I used the same typeface that we agreed on in the moodboarding stage�). We can also refer to the target audience, business objectives, branding guidelines and even previous comments by the client.

Reference material can be taken from farther afield, too. For example, when justifying your decision to ignore the fold, you can refer to research done by ClickTale. Citing research and experts is a great way to justify an approach.

But remember, being able to explain your design is only half of the objective in this challenge. The other half is about improving the quality of your work.

Improving Our Work

Getting into the habit of justifying your decisions will inevitably improve the quality of your designs. Instead of leaving it to the subconscious, the act of considering imagery, layout, typography and so on becomes a part of your conscious decision-making process.

The act of discussing your process refines it and makes you more efficient as a designer. For example, in carrying out the challenge, you will probably struggle to justify some of your design elements, elements that in hindsight would have been better left out or presented differently. This will inform your next website, and over time you will find that your designs become more refined, simpler and more effective.

So, What Are You Waiting For?

Smashing Magazine has a quite large readership and a remarkable community. We have an amazing opportunity to start talking about our work and providing each other with constructive criticism. Write a blog post on one of your designs, justifying your approach. Then link to it in the comments below. Encourage other people to provide feedback on your design, and take their criticism to heart. Finally, don’t forget to make comments and ask questions of other people who have posted their own work.

My hope is that this post will not only help us speak confidently about our designs and improve the quality of our work, but encourage a dialogue about the design process. We are good at showing off our products but bad at explaining how we came up with them. As a community, we could benefit from more discussion about the process itself, rather than endless inspiration galleries.

(al) (il)

© Paul Boag for Smashing Magazine, 2011.

Most people think of a yogurt brand when they hear, “Swiss style.� As designers, we may be a bit more familiar with the Swiss school of design. Some call it the evolution of modern design. Others may think of it as just a step to where design style is now. Both may be correct.

Josef Müller-Brockmann (May 9^th, 1914 – August 30^th, 1996) is considered one of the key players in the Swiss School of international Style. When one considers the time of his career, which included the Second World War, the Cold War and the growing influence of a Europe on the mend from destruction and fear, he certainly influenced not only a design style that influenced designers on a global scale. It was a time of rebirth for many nations that lay in ruins, rebuilding and rethinking centuries of tradition that were forced to change due to the brutality of war and cruelty.

Müller-Brockmann was more than just a man who sought to form what is now labeled the Swiss School; Constructivism, De Still, Suprematism and the Bauhaus, all of which pushed his designs in a new direction that opened doors for creative expressions in graphic design, influenced him. Among his peers he is probably the most easily recognized when looking at that period.

Perhaps his most recognized work was done for the Zurich Town Hall as poster advertisements for its theater productions. The work is graphic, rather than illustrative. Some critics say these posters created a mathematical harmony, which reflected the harmony of music. If one studies posters before that time, they would probably all agree that these are a bold and different way to play to visual messages dealing with music. Who would think of such a graphic? Who would dare execute such work at that time? If you look at the jazz and fusion albums in America at the time, you can see Müller-Brockmann’s influence.

The Grid System: Constrictive Or Freeing?

His design sense of the 1950s aimed to create posters that communicated with the masses. This was no small feat as the pieces had to communicate across a language barrier, with English, French, German and Italian speaking populations in Switzerland alone. It was the harmony and simplicity of these pieces that influenced a post-war world that had lost the sense of central nationalism and gained a lesson in the need for globalization. Müller-Brockmann was soon established as the leading practitioner and theorist of the Swiss Style, which sought a universal graphic expression through a grid-based design, purged of extraneous illustration and subjective feeling.

The grid was the prioritization and arrangement of typographic and pictorial elements with the meaningful use of color, set into a semblance of order, based on left-to-right, top-to-bottom. According to Wikipedia, the grid system is, “a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.�

Despite that dry description, the page does go on to add, “After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced by the modernist ideas of Jan Tschichold’s Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.â€�

In an interview with Eye Magazine in the winter of 1995 (a year before his death), Müller-Brockmann spoke about what order meant to him:

“Order was always wishful thinking for me. For 60 years I have produced disorder in files, correspondence and books. In my work, however, I have always aspired to a distinct arrangement of typographic and pictorial elements, the clear identification of priorities. The formal organization of the surface by means of the grid, a knowledge of the rules that govern legibility (line length, word and letter spacing and so on) and the meaningful use of color are among the tools a designer must master in order to complete his or her task in a rational and economic manner.�

The KISS Method (Keep It Simple, Stupid).

Müller-Brockmann is recognized for his simple designs and his clean use of typography, notably Akzidenz-Grotesk, shapes and colors, which inspires many graphic designers in the 21st century. As with the French posters in the 1890s, Müller-Brockmann and his peers also attempted to attract customers and sell products with bold, simplicity. The posters that served to attract an audience to events, especially music events and museum exhibitions embraced the abstract geometrical shapes the style is noted for; but it is the public service announcement posters from this time period that have been more noted than in many other periods of design. The simple, clean and graphic messages were, as with the music event posters, able to be understood by viewers with different languages.

Whether you deal with print or digital design, the lesson of Müller-Brockmann is for simplicity being more powerful than a mashup of too many elements. In a time of globalization with the web, it’s imperative that the message be simple and instantly understood by those with different languages and cultures. As with his poster designs, who could not get the message, seeing a speeding vehicle careening towards a small child?

Müller-Brockmann published several books, including The Graphic Artist and His Problems and Grid Systems in Graphic Design. These books provide an in-depth analysis of his work practices and philosophies, and provide an excellent insight for graphic designers wishing to learn more about the profession and creative thought. He spent most of his life working and teaching, even into the early 1990s when he toured the US and Canada speaking about his work.

Here we have somewhat of a cautionary tale for all of those in the field, to help guide us away from those behavioral models that we should all avoid. Well, that we should avoid if we do not wish to have the often negative connotations that are associated with these types of designers impacting our reputation as a member of the industry. Which might prove very difficult to shake off and recover from in the eyes of other members of the community.

Most of us have had, or have been, that friend warnings were issued about. The bad influence whose behaviors the older generation were so afraid others would begin to emulate, and then it would all be downhill from there. Well they are back! And here come the warnings to prevent as many of us in the design community as possible from following in their damaging footsteps. So take a look below at the breakdowns of those types of designers you should strive to not be, and see if you fit into any of the categories.

The Browse and Biter

First up we come to the nefarious Browse and Biter. This designer-type is characterized by their tendency to browse the web for ‘inspiration’, and they end up biting, borrowing, or simply flat out stealing the styles or designs that they see there. No matter how pure their intentions may be, this type of designer never learned the difference between being inspired by and, well, copying another’s work. Taking a look through their portfolios, one sees a lot of familiar looking or feeling works that they know they have seen somewhere before.

They see a design they like, and they just have to copy it. Image Credit

Tips to Avoid Being a Browse and Biter

These unfortunately unoriginal folks have a way of upsetting the understood natural order of things with their browse and bite ways, so it is best to learn where those lines are, and stay on the right side of them. Know where inspiration ends and your own voice and work begins. Know the difference between an homage and an ‘Oh, my god they ripped me off!’. Understand that if you admire someone and their work, the right way to honor them in your design is to use the way their work makes you feel and voice that through your work. Not duplicate what they have done. That tends to not be looked on as an honor. So be original, not a browse and biter.

The Stag

Next up, we have the Stag. This type of designer is mostly known for having a really specific style that never really grows or evolves. They just get to a point where they become satisfied with where they have gotten to, and they just stay there. Being stagnant. Soon all of their designs begin to feel stale, as no new ground is really ever broken in their work. And each ‘new’ piece that they craft feels very close to the last piece they just finished before it. And the one before that. And so on, ad nauseam. With this designer-type good becomes the enemy of great. They become satisfied with good and they never strive to be better. To be great.

Tips to Avoid Being a Stag

Now this is not to say that as a designer we should never be happy with the levels to which we have progressed. It is simply saying that we should always strive to be keep progressing. Growth is not a journey’s end, it is a never ending journey. A quest to always be learning more and evolving our skills. Nurturing them so they can rise to the next level and us along with them. And when we finish a design and begin a new one, we should always try to begin anew, as it were. To start fresh, and give each design a chance to be unique and not just a variation of our last piece.

The Boxer

Another designer-type to avoid becoming is the Boxer. These designers tend to be completely boxed in by the field, and for some unknown reason can not allow themselves to ever think outside the proverbial box. These incessant rule abiders become so caught up in the rules and principles of design that they never dare to break outside of or think beyond any of them. While Boxers may exhibit a technical proficiency, and their galleries may be full of precise, sharp designs, the work itself will have no heart. No daring. And as most of us in the field can attest, usually the pieces that have a lasting impact, tend to be those with heart.

For the boxer, everything makes sense in the ‘ring’, and they can’t bring themselves to step outside of it. Image Credit

Tips to Avoid Being a Boxer

While it is easy to see how a designer can become so enveloped in the basics and those standard design practices that they forget about actually ever trying to push any envelopes through their work, it can be overcome. Design is a dynamic and versatile field that is built on those rules, but they are meant to be more of a guide for us than an absolute. As long as we have an understanding of them, then we can try pushing beyond them every now and again to find our way to true innovation in our designs. Think of the box as our arrival packaging into the design world. Now that we are here, we are not going to stay in our original packaging. We are going to unpack the box and use those things inside the way we best see fit.

The Safe-Player

Not moving on very much, we come to the next designer-type you want to avoid becoming, and that is the Safe-Player. This is actually somewhat of a variation on the Boxer. These designers do want to push the envelopes, and take huge design leaps of faith, but alas, they are too scared, and as a result they reel it in and always end up playing it safe. When you look through their work, you get that comfortable safe feeling exuding from all of it. None of the designs feel like they dared into any new or unfamiliar territory. This often stems from the designers desire to not make any mistakes, so they opt for the safer route. Forgetting all the while, that we need to be making mistakes so we can learn and grow.

Tips to Avoid Being a Safe-Player

For the most part, the advice here follows in suit with the tips for avoiding the Boxer model. However, we should stress that if you want to cast off these Safe-Player shackles, then you really need to be comfortable taking risks in your designs. You cannot let fear of mistakes or failure keep you from trying something new. Not if you want to stand out from the masses.

The Offended Defender

Now we move into the next warning section, that of the Offended Defender. These designers are usually characterized by their offended defenses of their work against any criticisms. Even those that are intended to help the designer make improvements. And they may actually be a good designer by and large, but the fact of the matter is, that they could be great if only they knew how to take and use these critiques of their work. As you look through their gallery, you wonder why some of the works seem like they could benefit from some slight tweaking. You might even go so far as to send them a polite note suggesting one such tweak. That is when you learn why those designs are and will forever stay that way.

It does no good getting all offended and in someone’s face because they tried to help. Image Credit

Tips to Avoid Being an Offended Defender

The main thing that one can do to step out of this less than favorable light, is to learn how to take criticism without imploding or defensively clinging to the critiqued element and allowing the work to suffer due to some over-inflated sense of ego or pride. And that is unfortunately the way that some designers take it. Even in the harshest of critiques we can often find some useful tips or hints to take away. We just might have to dig down to find it. We also can not let someone else’s negative tone let us get defensive and tune out to what useful tidbits might be buried underneath it.

The Apt-less Pupil

Now we come to the Apt-less Pupil designer-type. Now here it is not that these designers are so much slow learners that makes them less than desirable to become, it is just that they never quite get there, but think that they have it. There is nothing wrong with being a slow learner, but clients and colleagues working with you on a project should not have to suffer through your learning curve. These designer-types also can reflect poorly on the industry overall, as they introduce a segment of the market who call themselves designers, and hire themselves out as designers, but they are not quite designers.

Tips to Avoid Being an Apt-less Pupil

Basically, learn the field before stepping onto it to play in a game. Plain and simple. Also, do not take a job that you are not yet fully qualified to be taking, and you will steer yourself clear of this label easily.

The Underwhelmer

Now we come to the next designer-type, the Underwhelmer. These not-so over-achievers are mostly recognized by their tendencies to effectively under-deliver for their clients. In fact, they even tend to talk a really good game, which makes them hard to recognize to most. But even though they themselves have set the bar of expectations they rarely, if ever, live up to their own hype. Where most designers will tell you that the secret to success is to always over-deliver for your clients, this flock tend to fall short of that mission statement.

We want to make the best of impressions all the way through the project, not completely drop the ball by under delivering on their expectations. Image Credit

Tips to Avoid Being an Underwhelmer

To keep from baring this brand, again you have to know your limits and not let yourself get in over your head. Whether it is by committing to a project that you do not have the design background or know-how to come through on. Or whether it is by taking on too many clients or projects so that you end up coming up short on one or more of them when the deadlines roll around. Make sure that you can stay ahead of your workload, and have enough skill to deliver on all of your promises, and you might be able to keep from falling into this category.

The Space Cowboy or Cowgirl

Moving on, we come to the Space Cowboy or Cowgirl types of designers. Sufficed to say, their heads are far beyond just being in the clouds, they have left our general atmosphere and are floating in space. These designers are typically characterized as promisers of the moon, without any consideration given to the coding that will have to breathe life into their designs. Also known as the Coder’s Nightmare. Most designers for the web understand that some level of coding background is necessary so they can proceed somewhat reasonably. The Space Cowboy or Cowgirl makes no such concession.

Tips to Avoid Being a Space Cowboy or Cowgirl

Basically, to keep from wearing this dreaded label you need to be informed. Come down from those heights and plant your feet on the ground for a spell. Walk a mile in a Coder’s shoes. Then give them their shoes back and work together to make the most of the design project. Be reasonable in your expectations from the coders, just as you would expect from your them, or as you would expect from your clients.

That’s All Folks

That pretty much wraps up the discussion. Well, from this end anyway, but things are far from over. Now it is up to you to take over and let us know your thoughts on the subject at hand. And remember, for any of those finding themselves fitting into one of these roles, acceptance is the first step on the road to recovery. What designer-types would you warn your kids not to grow up to become? Are there any additional tips you would offer any sufferers of these behaviors that were left out?

(rb)

Considering how many designers are self-taught, either in whole or in part, the importance of a solid foundation in graphic design theory is often overlooked. New designers often want to jump right into creating websites, rather than learning the basics of why some designs work and some don’t. But they’re putting themselves at a disadvantage to designers who do have formal training or have taken the time to learn the principles behind good design.

Below are more than 45 recent lessons in graphic design theory. Included are general theories, theories about user experience and usability, typographic theory, layout and grid theory, and color theory.

General Design Theory

The Lost Principles of Design
Covers a number of basic graphic design principles, including balance, contrast, emphasis and subordination, directional forces, proportion, scale, repetition and rhythm, and unity, all with illustrations.

Principles of Good Design: Balance
Discusses how important balance is to creating an effective design. It covers symmetrical and asymmetrical balance, as well as off-balance designs.

Web Design Tips: The Use of Balance
This covers how to create balance in your website designs. It’s a simple overview article, with a lot of practical advice in addition to theoretical discussion.

The 5 Primary Principles of Potent Web Design, Part 5: Balance
This article from The Pro Designer covers the principle of balance and how to apply it to your designs. It’s short and to the point. Be sure to check out the links at the end for the other principles in the series.

3 Graphic Design Principles for Instructional Design Success
While dealing specifically with instructional design, this article covers three important principles that can be applied regardless of the purpose of your design: using layouts to convey meaning and relationship, using pattern and repetition to organize content, and using just the right images and no more.

Elements and Principles of Design
A great primer on the basic theories of visual design. If you’re not sure where to start, this might be a good place.

In Search of Ethics in Graphic Design
Ethical considerations are all too often overlooked in the world of graphic design. This article aims to change that by discussing a designer’s responsibility to their users.

Want to Know How to Design? Learn the Basics
This article provides a great overview of basic graphic design principles, including color, line, shape, space and more. Additional resources are provided for each concept.

Elements and Principles of Design
This page offers a basic but useful overview of the elements and principles of design, with basic illustrations of each concept. It’s a great starting point and incredibly easy to understand, because it’s aimed at young students.

11 Principles of Interaction Design Explained
Veering away from strictly graphic design, this useful article covers theories related to interactive design. Included are concepts such as matching experience and expectations, consistency, and functional minimalism. Some of the concepts could be carried over to non-interactive design (such as for print media).

The Modern, No-Nonsense Guide to the Principles of Design
This covers all of the basics: balance, emphasis, movement, pattern, repetition and more, as well as six “new� principles of eBook design that are just as relevant to website and graphic design.

Grid and Layout Theory

Grid-Based Web Design, Simplified
This covers the theory of grid-based design and gives practical advice on how to create your own grids, without over-complicating things.

Grids in Modern Web Design
A slideshow that explains the theory behind using a grid for a layout. It’s a quick introduction to grid theory, with a few practical examples.

Grids: Order Out of Chaos
A short article from About.com that discusses the basics of grid systems, why you should use them and what goes into designing them. Most of the information is geared to magazine and other print media, but many of the principles apply to all types of design.

Rule of Thirds, Visual Center, Grids
Another About.com article that discusses the theories of balance in page layout. The principles could be applied to either web or print design, but the article focuses on print design.

Gestalt Principles Applied in Design
This Six Revisions post covers the six basic principles of Gestalt theory — proximity, similarity, figure-ground, symmetry, “common fateâ€� and closure — and how to apply them to your designs.

Understanding Visual Hierarchy in Web Design
This Webdesign Tuts+ post covers the basics of visual hierarchy from a very practical standpoint. By the time you finish the article, you’ll have a grasp of not only what hierarchy is and why it’s important, but also how to effectively incorporate it in your designs.

How to Use Visual Hierarchy in Web Design
This article from Design Shack covers the principles of visual hierarchy and how to achieve it, accounting for size, color, position and visual complexity.

Grid Theory
This article covers grid theory in relation to Phi, the Rule of Thirds, and the 960 Grid system. It’s excerpted from Jason Beaird’s The Principles of Beautiful Web Design book.

Applying Divine Proportion to Your Web Designs
Discusses how to apply Phi (a ratio of roughly 1:1.618) in order to achieve more attractive and visually balanced designs. It also discusses the Rule of Thirds and has some practical advice for implementing each theory.

Usability and User Experience

5 Timeless Usability Principles for Website Designers
This post from 1st Web Designer covers five established principles of usability, including designing with a target in mind and focusing on conventions.

10 Usability Principles to Guide You Through the Web Design Maze
A quick overview of 10 usability principles. It’s short and to the point and a great place to start learning about usability.

How Cognitive Biases Shape User Experience
This slightly more advanced article covers the psychology behind why users react to design elements the way they do. It also covers the cognitive biases of those involved in crafting the user experience and how they can negatively affect the result.

Principles for Usable Design
A quick overview of some important usability principles, including consistency, simplicity and communication. It offers a handful of tips for effectively implementing each principle.

8 Design and Usability Principles You Can Apply to Your Website
This article offers some great tips that, if followed, could really improve the usability and user experience of your designs. Included are topics like designing to demographics and writing for a Web audience.

11 Quick Tips for More Usable Content
This UX Booth article has some excellent ideas on how to make your website’s content more user-friendly. Some are directly related to design, while others are more related to the content itself (which should always be considered in context of the design).

What You Need to Know About Usability
Some solid background information on website usability, including why it’s important, some information on Jakob Nielsen’s heuristics, and some best practices for usability.

Typography

A 20 Minute Intro to Typography Basics
A quick, simple guide to good typography. This is a high-level overview that covers things like typeface classifications, the anatomy of type, kerning and tracking, alignment, and ligatures, among other topics.

8 Simple Ways to Improve Typography in Your Designs
This not only teaches you the theories behind the tips, but gives you practical examples and code to get you started using the theories.

The Elements of Typographic Style Applied to the Web
One of the most thorough guides to Web typography theory out there. It covers horizontal motion, vertical motion, blocks and paragraphs, the etiquette of hyphenation and pagination, and harmony and counterpoint, all in detail.

Designing for Seniors
If you ever have to create designs for older demographics, then this is a must read. It explains numerous ways to make type more seniors-friendly, including guidelines for typographic style and size, text length, white space and more.

Typography for Children
There are also guidelines for designing typography for children. This article covers things like legibility, readability and more, all related to how children perceive and respond to designs.

Typography Is the Backbone of Good Web Design
Brian Hoff covers the techniques that he uses in his own Web typography, discussing both why they work well and how to get good results.

How to Create Great Web Typography in 10 Minutes
This article is a mix of theory and practical advice, and it covers vertical rhythm, font families, visual hierarchy and font colors, all of which are important in typography, regardless of medium.

“What Font Should I Use?�: Five Principles for Choosing and Using Typefaces
Includes some excellent guidelines for choosing fonts for your designs, including contrast, font families and appropriateness.

Eight Tips for Type on the Web
A short article from Fonts.com that covers basic guidelines for creating good Web typography. Included are things like avoiding justified text, using smart punctuation and creating a typographic hierarchy.

Type and Color
Explains how to choose the proper colors for your typography, and the rationale behind using different colors when designing type.

Typography Tuesday: Hierarchy
Hierarchy is one of the most important concepts in typographic design, because it reinforces the priority of elements. Creating a sense of hierarchy is as simple as differentiating between such elements as headlines, body copy, headings and so on. This article covers a variety of ways to do that.

Type Study: Typographic Hierarchy
Here is a great lesson in typographic theory, walking you through the principles, with a fantastic example that evolves throughout the article.

The Typographic Scale
This covers another vital part of typography design: sizing your typography based on a pre-defined scale. This gives the text more order and reinforces relationships between the various typographic elements.

Color Theory

Color Theory for Designers, Part 1: The Meaning of Color
The first part in my own three-part series on color theory for designers. This article covers the meanings of different colors, including cultural differences in color meaning. Parts two and three go deeper into the concepts and terminology of color theory and into creating your own color schemes.

Color Theory Quick Reference Poster
While not strictly a theory lesson, this poster includes all of the basics you need to know about color theory, in an easy-to-reference format. It’s available as a print-ready PDF or as desktop wallpaper.

Color Theory in Graphic Design
Covers the basics of creating color schemes, based on traditional patterns. Helpful illustrations accompany each pattern.

Understanding Color and Color Theory in Graphic Design, Part 1
Here’s another series that introduces you to color theory relative to graphic design. It starts out with some basic terminology and color schemes, and then progresses to color meanings in part 2.

A Look Into Color Theory in Web Design
This Six Revisions article offers a great overview of color theory, including the color wheel, terminologies, relationships between colors, types of color in design, and color meanings.

How to Get a Professional Look With Color
This post from Webdesigner Depot covers all of the basics of using color to achieve a professional design. It goes into more advanced techniques for creating color schemes.

Creating Consistently Colorful User Experiences: Part 1, Theory
This article on UX Booth discusses color theory in terms of user experience design. It talks about how color helps define how users perceive information in a design, as well as the subconscious impact of color on user experience.

(al)(rb)

It’s more or less common practice these days to use real HTML lists when what you’re marking up makes logical sense as a list. If you don’t want it to look like a standard ordered or unordered list, that’s easy to fix with a bit of CSS. The underlying semantics will still be there for people using browsers without CSS support or screen readers.

But will it? The short answer is no, not always.

Read full post

Posted in Accessibility, CSS.

Copyright © Roger Johansson