Are You Ready For A Web Design Challenge?


This is not a normal Smashing Magazine post. I’m not going to learn we something new or enthuse we with examples of good work. Instead, we wish to inspire we to complete a Web pattern challenge. we trust this will assistance to residence a debility that exists in many of a pattern processes.

If we finish this challenge, it will make it easier for clients to pointer off on your designs, and it will urge a peculiarity of your work.

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

The Challenge

If you’re like me, we did some form of aloft preparation in art and pattern and will know about “the crit”.  These meetings engage a category entrance together with tutors to investigate and yield constructive critique on any other’s work.

These were terrifying meetings in that we fit my pattern proceed and shielded it opposite criticism. Although we hated any notation of them, we trust they nurtured one of a many useful skills we have as a Web designer.

The ability to logically transparent a designs is a ability many of us lack. This is a heart of a plea we wish to lay down.

My hurdles is this:

Write a blog post justifying a pattern proceed we took to one of your websites. Then, inspire other Web designers to yield feedback and ask questions.

Admittedly, this competence sound like a lot of effort, so let me explain since it is value your while.

Why This Challenge Is Worth Undertaking

As we pronounced in a prior article, being a good engineer is not enough. You can furnish superb work and be a enviousness of your peers, and nonetheless onslaught to remonstrate clients of your approach. The reason is that clients do not know pattern a proceed your colleagues do. Therefore, we need to be means to transparent what creates your pattern right.

Our ability to justify a choices is crucial to a attribute with clients. Without it, clients will miss certainty in a abilities or, worse, feel released from a process. A miss of certainty leads to micro-management, and ostracism leads to disappointment and resentment. Therefore, explaining a proceed is vital.

However, it isn’t usually about a client. It’s also about your personal development. If we don’t have a transparent thought of what works, afterwards improving will be difficult. Design critiques are as many about improving a peculiarity of your work as justifying it to others.

Unfortunately, this requires that we overcome dual barriers.

First, many of us don’t entirely know since we have designed a website a certain way. We pattern during a subconscious level, formed on years of experience. When we have been pushing for a while, we stop to cruise about a routine of driving. Likewise, pattern decisions are mostly rubbed during a deeper spin than a unwavering mind.

Secondly, many designers haven’t had to transparent their proceed in a past. Either they haven’t left by a severe critiques that we gifted in university or they don’t have a knowledge compulsory to transparent their decisions.

It is for these reasons that this plea is so valuable. By essay a blog post about a sold pattern and enlivening feedback, we move your decisions from a subconscious to a unwavering level and advantage profitable knowledge in articulating them.

Of course, meaningful where to start such a plea can be a plea in itself.

Where To Start

If we are not used to meditative about pattern during a unwavering level, afterwards we competence onslaught to begin. While there is no right proceed to do this, we can share a proceed that we use.

When deliberating my pattern with others, we tend to demeanour during a several components that make adult a product. These customarily are:

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

Ask yourself, since did we proceed any of these elements a proceed that we did? Let’s cruise any in turn.


Why did we use that sold grid structure on a website we are reviewing? Can we transparent your reasons for regulating a 12-column grid instead of a 16-column one? What about a margins and padding? If a customer complained that there was too many white space between columns, would we have a response?

Another common emanate is when we purposely mangle out of a grid. Was a choice intentional, with good reasoning, or usually an guileless decision? What would we contend if a customer asked about it?

The choice of grid competence be formed on a calm or on a constraints of a character guide. It could have to do with creation a website work on mobile inclination or with permitting coherence for destiny changes. Whatever a reason, we need to be means to clearly transparent them to yourself and a client.

960 Grid System
Are we selecting a sold grid since it is right for a website or usually since we have depressed into a habit? We need to be means to transparent a proceed to a clients and ourselves.


Layout and grid competence sound a same, though they’re not. By layout, we am referring to white space and a chain of elements on a page. These are mostly points of dispute between a engineer and client, so being means to explain your proceed is important. For example, how would we transparent all of a white space that Google has comparison to use on a home page?

Why did we leave so many white space on a page? Was it to pull a user’s eye to a sold element, or maybe to urge readability?

What about a positioning of elements? Why is a hunt box in a top-right corner? Is it since this is a gathering and people demeanour for it there, or maybe since we wanted to associate it with other elements that are in proximity?


Color is substantially a many argumentative of subjects, and so we need to know a motivation. we tend to proceed tone welfare in one of 4 ways:

  1. Corporate branding guidelinesThe palette has been tangible by a guidelines, and we work within these constraints.
  2. TheoryI use a apparatus such as Kuler, that produces a palette formed on determined theory.
  3. Emotional responseThe extensive research finished on people’s responses to colors informs my palette.
  4. Main imageIf a website has a widespread picture that has already been authorized by a client, we use it as a basement for a tone palette. There are great collection for extracting tone palettes from images.

Adobe Kuler
Adobe Kuler is usually one of many collection that assistance we request tone speculation to your palette selection.

By explaining your choices in these pattern terms, we forestall tone from apropos a matter of personal welfare and so equivocate conflict.


Something as clearly elementary as typography consists of many opposite decisions. These decisions extend distant over a welfare of typeface and ring line height, size, weight, kerning and many more.
With services like Fontdeck creation so many fonts accessible to us, a need to know and transparent a choices is some-more critical than ever.

You need to be means to speak quietly about your choices if we are to denote your imagination and communicate that what we do is a lot some-more formidable than it competence appear. Taking a time to explain a complexity behind your typographic decisions competence sound boring, though it will impress. It will also force we to put some-more care into your choices.


To many clients, imagery is merely about theme matter. But we know it is about many more. We name imagery formed on a mood it sets, a colors it contains and even things such as a eye line of a chairman in a photograph.

We need to be means to transparent these decisions so that others commend that we can’t simply surrogate one picture for another though significantly inspiring a design.

Do we know since we comparison one picture over a thousands of others in your library? What finished that picture special? Can we explain this to yourself and a client? Was it unequivocally some-more than a “That’ll do” decision?


For me, styling refers to shade elements that are not directly content-related: buttons, links, call-out boxes and a engorgement of other elements that need to be motionless on.

How we character these elements can dramatically figure a feel of a website. From a chrome buttons on Apple’s website to a sketched buttons of Moredays, styling can make a outrageous difference.

A comparison between a navigation on Apple and Moredays
Styling dramatically shapes a feel of your website. But can we transparent since one proceed is improved than another?

Can we explain since your styling creates a right feel? Have we shown a customer choice approaches? Did a customer pointer off on moodboards, that set a style? If so, impute behind to them when justifying your design.

Reference Material

In fact, whenever justifying a design, always impute to a element that has already been concluded upon. For example, if a customer has sealed off on moodboards, we should use these to transparent a choice of typography (“I used a same typeface that we concluded on in a moodboarding stage”). We can also impute to a aim audience, business objectives, branding discipline and even prior comments by a client.

Reference element can be taken from over afield, too. For example, when justifying your welfare to omit a fold, we can impute to research finished by ClickTale. Citing investigate and experts is a good proceed to transparent an approach.

But remember, being means to explain your pattern is usually half of a pattern in this challenge. The other half is about improving a peculiarity of your work.

Improving Our Work

Getting into a robe of justifying your decisions will fundamentally urge a peculiarity of your designs. Instead of withdrawal it to a subconscious, a act of deliberation imagery, layout, typography and so on becomes a partial of your unwavering decision-making process.

The act of deliberating your routine refines it and creates we some-more fit as a designer. For example, in carrying out a challenge, we will substantially onslaught to transparent some of your pattern elements, elements that in hindsight would have been improved left out or presented differently. This will surprise your subsequent website, and over time we will find that your designs turn some-more refined, easier and some-more effective.

So, What Are You Waiting For?

Smashing Magazine has a utterly vast readership and a conspicuous community. We have an extraordinary event to start articulate about a work and providing any other with constructive criticism. Write a blog post on one of your designs, justifying your approach. Then couple to it in a comments below. Encourage other people to yield feedback on your design, and take their critique to heart. Finally, don’t forget to make comments and ask questions of other people who have posted their possess work.

My wish is that this post will not usually assistance us pronounce quietly about a designs and urge a peculiarity of a work, though encourage a discourse about a pattern process. We are good during display off a products though bad during explaining how we came adult with them. As a community, we could advantage from some-more contention about a routine itself, rather than unconstrained impulse galleries.

(al) (il)