Understanding the Z-Layout in Web Design


The Z-Layout is a great way to start just about any web design project because it addresses the core requirements for any effective site: branding, hierarchy, structure, and call to action. While the classic “Z-Layout” isn’t going to be the perfect solution for each and every website out there, it’s certainly a layout that’s effective enough to warrant inclusion in any web designer’s arsenal of layout ideas.
Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience.
This post marks the first in a series where we’ll be examining the wide variety of layout paradigms that exist in the world of web design. The goal: to better understand why you might choose one layout concept over another. In this series, we’ll also be looking at the “F” shaped pattern, the open layout, and some out of the box layouts that are sure to give you some great ideas. Attaining a better grasp of how different layouts can change user behavior is one of the central principles of the creating an effective user experience.

Introducing the Z-Layout

The premise of the Z-Layout is actually pretty simple: super-impose the letter Z on the page. Place the items that you want the reader to see first along the top of the Z. The eye will naturally follow the path of the Z, so the goal is to place your “call to action” at the end. All along the path you can include bits of information that build up to the call-to-action. Let’s take a look at the diagram:
Notice that we’ve numbered the key points along the path – these represent the order in which a reader is likely to view the page content. Let’s see how this translates to an actual layout:
Now let’s overlay the Z-Diagram on top of the layout:
Simple, right? There’s certainly nothing complicated about this layout – but it quickly and effectively moves the eye from Point 1 to Point 4 in a logical order – concluding with a powerful call to action. There’s still a few things that we can do to spice this layout up though… so let’s add a few things to the design:
  • Background separation to focus the eye movement inside the framework of our design.
  • A styled logo to grab the user’s attention at point #1.
  • A colorful “sign up” button at point #2: this will reinforce the desired eye movement.
  • A Featured Image Slider in the center of the page: this will separate the top section of the design from the bottom, and facilitate eye movement downward.
  • Icons at point #3 and along the bottom axis: this will encourage “title scanning” as the eye moves to the call to action.
  • A big “call to action” at point #4 – thanks to the new background separation, this feature should stand out more.
Here you can see that the new “sign up” button in the navigation stands out more; The “slider” that we’ve added to the leaderboard area helps keep the user’s attention within the center of the frame; The 2 icons next to the blocks of content in Point 3 also help to make them a bit more visually interesting. Again – this stuff is simple as it can be, but simple can be good when it comes to website design! You can layers in complexity as you please, but don’t overlook the power of a simple, effective layout.

Why it Works

The Z-Layout certainly doesn’t need to be the final concrete solution for all sites, but as I mentioned before, it’s often a great jumping off point for any design project because it tackles the 4 of the big principles of an effective design:
  • Branding
  • Hierarchy
  • Structure
  • A Call to Action
It works because most Western readers will scan a site the same way that they would scan a book – top to bottom, left to right. From this simple foundation you can pretty much go anywhere: Add multiple calls to action, shrink the height of the Z, extend it, do whatever you’d like that makes sense to the goal of the site.
Let’s take a look at a few great site designs that use the Z-Layout as the basic structure. One thing you’ll want to note in these examples is how the z-layout is able to adapt. The Call to Action may not always be the same (some sites may want to drive you to their portfolio more than they want to you “Sign Up”); the content along the path may look markedly different than our example. The thing to notice is how the storytelling aspect is carried across: 1, 2, 3, Action! By moving the eye along the Z-Path, the chances that a viewer will end up doing what you want them to do is increased.
While you view these examples, try to find the Z-path that the designer wants you to follow.

Examples of the Z-Layout in Action


Evernote looks complex at first glance, but a closer inspection reveals a z-path ending with the “download” button.

Much simpler, the Daina Reed site delivers a couple quick bits of information, then prompts a “Get in Touch” action.

The path on CodeMonkey starts at the logo and ends on “Get Started”.

It’s a bit harder to see here because of the duo-chrome palette, but the z-layout creates the general framework.

This example ends with a bright, bold price tag.

Probably one of the clearest uses of the Z-Layout, the Blue Acorn design hits each point along the path.

Campaign Monitor’s design mixes up the layout, but the 1, 2, 3, 4 steps are all intact.

Caveats Worth Mentioning

It’s important to note that the Z-Layout isn’t the only layout paradigm that’s out there. Heck, there are about as many layouts as there are letters in the alphabet. The Z-Layout is one of the principle layouts because it’s so simple to use as a foundation, but you’ll always want to trust your instincts when it’s time to make a final layout decision.
…Regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page.
There have been a bunch of interesting studies done on eye-tracking that suggest trying to predict eye-movement across a website is about as erratic as sending 1,000 kids into a candy store. Several studies have also shown that the “F” shaped layout (which we’ll be reviewing next in this series) is more effective at controlling a viewer’s eye movement across a page. The simple truth is that, regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page. Keep this in mind; if your goal is to guide a viewer through the Z-Layout, don’t give them any more opportunity to be distracted along the way than they already have.
Where the Z-Layout truly shines is in design projects where simplicity and a call-to-action are the most important principles. Trying to force a Z-Layout on a complicated content structure probably won’t work well, but allowing the Z-pattern to form a framework for a very basic site can bring a sense of order that can help increase your conversion rate.
Check out the “F” shaped pattern post!

Oh! Check out a list of stock-templates that use the Z-Layout here.
Read More

5 Easy Ways to Prepare Your Web Designs for Coding


Congratulations! You’ve designed your site and you feel like it’s ready to be sent off to a coding team. You might have a developer in mind, or you might be comparing the popular PSD > HTML shops that are out there… you might even plan to code it all yourself. No matter what solution you decide upon, there are a few tricks that I think every designer should know when they are preparing their designs to be coded into fully functional websites.
Philo Hermans is a freelance web developer from Utrecht, The Netherlands. He has over 9 years of experience and often works with designers to turn their designs turned into fully coded websites or web applications. Philo is also a successful plugin developer on CodeCanyon, and has written frequently atNettuts+. With that introduction out of the way, let’s get started with the tips!

Tip 01: Make it “Pixel Perfect”

The theory behind creating “pixel perfect” comps can be stated like this: To us coders, what we see is what you get! Most coders won’t interpret your designs for you. If you hand over a design comp with mis-matching margins, padding, font sizes, colors, etc., most developers will code it exactly as we see it – including the errors! This can mean lots of frustration and wasted time (and money) making revisions; so save yourself a headache and send out pixel-perfect comps if you want pixel-perfect coding.
Prior to sending your design to the coding phase, take an hour or two to review it with a fine toothed comb.
The workflow solution here is simple – Prior to sending your design to the coding phase, take an hour or two to review it with a fine toothed comb. You don’t necessarily need to document your entire design (although some developers will require this), but taking care to make sure the following elements are exactly how you want them is crucial:
  • Margins: All margins between elements should more or less match up. If you intend all margins to be 25px, make sure that they are exactly 25px inside the design.
  • Padding: This is the same rule as with margins: make sure the padding inside elements is consistent with your intentions.
  • Font usage: Make sure that every time you use a font in the design, it’s exactly what you want to be coded – if you want “all paragraph text to be 10px Arial with 18pt line height”, make sure that each paragraph in the design is set in this exact way.
  • Colors: If you have an exact color in mind, whether it’s for a font, background, or anything else, make sure you use the exact hexadecimal value that you want used in coding.
It’s also worth taking a moment to set some “guidelines” inside the design files that you hand over. An easy way is to use a grid template like the 960.gs website provides. The guidelines in the grid template make sure that the widths of the elements are all precise. So instead of having a container that’s 957px wide, it will be the exact 960px that you intended.

Tip 02: Leave Notes

If you want something that’s not obvious, such as a navigation menu that has to slide down when you move your mouse to the top of the screen. Make sure that you make it clear by adding notes. There’s a few ways that you could do this (I’ve seen everything from PowerPoint documents to printouts with hand-writing on it), but my favorite way is actually pretty simple: Use the Note Tool in Photoshop (see image below). The note tool will automatically make notes show up when a developer opens up the file, and it’s easy quickly read up on what a designer has intended.
If you aren’t using Photoshop, that’s okay. Most graphics software that I’ve found (from Fireworks to Illustrator) have a similar way of adding notes. If for some reason this isn’t an option – just make your notes into a text file that you include with the files you deliver to the developer.

Tip 03: Include Designs for Interaction

The more detailed your design is in terms of interaction, the easier it is for a developer to code it. Be sure to add some examples of what your design will look like when it’s interacted with. Every design is going to be different, but the important interactions that shouldn’t be forgotten include:
  • Dropdown Menus
  • Link/Button Hover States
  • Image Sliders
  • Lightboxes
  • Tooltips
  • Form Elements
The reason behind this tip is this: if you don’t show a developer how you expect a certain interaction to look, chances are that they’ll use an unstyled generic design, which could stand out like a sore thumb. Sure, there are some coders (like me!) that will do our best to guess what you would have wanted, by why leave something so important to guesswork when it takes you just a few minutes to design it yourself?

Tip 04: Have a Script in Mind

Time is money, so if you design a website with a nice looking slider and you know exactly which script would be perfect for it, tell the developer before they start coding it from scratch! If you don’t have a particular script in mind, it’s probably worth your time to spend a couple minutes searching for whether or not one exists. Custom scripts can cost lots of time and money – and it’s a lot easier for you to create a design with a particular script in mind than it is to create a custom script from scratch to match your design.
Using pre-made scripts isn’t a bad thing! This might seem like advice meant to crush your creativity, but think of it this way: it can easily take 20x as much time to code something from scratch rather than using a pre-made piece of code. Pre-built scripts are usually easy to adapt and re-design, and there are thousands upon thousands of them available through a simple Google search. Envato even has it’s own marketplace for premium scripts if you can’t find a free one that works: CodeCanyon!

Tip 05: Get to Know the Technology You Are Designing For

Let’s imagine that you’re a designer on a major project. You spend weeks laboring over a design and finally get the approval of your client… only to find out a week later that the design is nearly impossible to code and that it’s going to cost 10x as much as the client had budgeted; All because you designed the entire site without an understanding for what is and isn’t possible with a certain technology (Flash, HTML, etc.).
One of the most important tips that I can give out is this: It’s vital that every web designer have someknowledge about the platform that they are designing for. This could be HTML, Flash, PHP, or even a device like a phone or tablet. How much you learn is up to you, but the basic understanding of how a platform works will save you a lot of heartache in the long run. Far too often I’m given a gorgeous design that isn’t practical (or affordable) to code because it hasn’t been designed with practicality in mind.
Far too often I’m given a gorgeous design that isn’t practical (or affordable) to code because it hasn’t been designed with practicality in mind.
I’m not suggesting that you limit your creativity (just about anything can be coded with enough time and energy); and I’m also not suggesting that you go out and become a coding guru (you’d put me out of a job!)… But having even a basic knowledge of the technology that you are designing for will help inform your designs with some basic rules of thumb that will make coding them easier and more affordable.
For instance: if you designed a site to be built as a static web page, it would make sense to learn a little bit about how HTML and CSS work. Having even just a basic understanding of how HTML and CSS relate to each other will be enough for you to make better decisions when you are designing. The more informed a designer is about the technology he/she is designing for, the better they will become at designing!
*Yes, HTML isn’t the only technology out there, so if you’re designing with Flash or another technology in mind, make that the focus of your research… you get it though, the architect should know how to swing a hammer, even if he never does it.

Bonus Tip : Speak Up!

You don’t need to provide a 20 page style guide for every website you design, but communicating principles that might not show up in comps can be really important to the success of any coding project. If your design has special requirements (ie: it needs to be meet certain accessibility standards, or it must be 100% compatible with IE5.1, etc.), make sure you let the coder know up front so we can plan ahead for it. Finding out major requirements AFTER the design is coded is a recipe for expensive revisions, which aren’t nearly as fun or lucrative for coders as you might imagine! Most of us would much rather move on to another exciting project rather than spend months making revisions with a frustrated client.

Conclusion

The last thing that I’ll mention is this: if you follow these tips, not only will you find that your designs become easier and more affordable to code, you’ll also probably notice that your work will improve as a result. Taking a few extra steps to ensure that you designs make sense in the practical world of web development can be the difference between a good website and an exceptional website. I hope you enjoyed this article!
Read More

In-Depth Design Review of charitywater.org – BAD 2010


Blog Action Day 2010 is upon us! This year, Webdesigntuts+ is getting involved with a special design review of one of our favorite water-based charities: charitywater.org. We’ll explore the key elements that make the website such a success and how you can borrow the same design strategies for your own projects!

charity: water

In honor of this year’s Blog Action Day, we’re offering an in depth design review of the website,charitywater.org. “charity: water is a non-profit bringing clean and safe drinking water to people in developing nations”.
Sites for charitable organizations are always interesting projects because they need to engage visitors to action. The website far exceeds what you would normally expect from a non-profit though; It boasts solid design fundamentals across the board and has a few great design tricks that give it a sense of character and refinement that few non-profit websites have. Let’s dig right in!

Strategy 01: Color Usage

The first thing that you will likely notice on the charity:water website is the disciplined use of their brand color. What’s unique here is that they use color in the same way that a corporate brand might use color. Notice how the blue never varies from one page to another – everything from the typographic highlights to the background and infographic colors tie the “charity: water blue” back into the design. The color usage is ubiquitous across the site; So even if the layout changes from one page to another, color serves as the constant unifying element… which ultimately gives the designer a little more freedom to play around with.
…using controlled color will create a professional presentation that gives the visitor a feeling that the site is credible and trustworthy.
What does this controlled color usage do to the aesthetics of the site? It creates a unified, cohesive user experience. More importantly, using consistent color will give the visitor a feeling that the site is credible and trustworthy; something that is vital to non-profits who constantly need to battle for the trust of potential donors.

Strategy 02: Smart Typography

Typography is one of those things that every designer knows deep down is at the heart of engaging visitors, but it’s so often neglected in favor of the status quo text formatting. The charity:water website excels at using typography to draw the user in and emphasize the key elements that make this specific crisis worth knowing about.
From a technical standpoint, the typography uses established principles to guide the eyes around: the navigation and brand are subdued but easy to locate; “calls to action” and other key pieces of information are bold and easy to scan. Within 10 seconds of visiting the site, you probably had a pretty good grasp of the message just by scanning the major headlines… that’s effective typography! Instead of burying major points of interest within blocks of paragraph text, the site brings them to the front of the visitor’s attention.
Within 10 seconds of visiting the site, you probably had a pretty good grasp of the message just by scanning the major headlines… that’s effective typography!
While the typography across the site feels wild and innovative on the face, it never breaks from a core set of rules: major headlines are set in a block typeface that draws instant attention, titles are set in a serif typeface that feels dignified, and the rest of the text on the page is set in a simple sans-serif that is easy to read. Using just a few simple rules like this can help unify your design even if you want to be all over the board with your layouts and type usage. Let’s take a quick peek at the type hierarchy on the site:

Type Hierarchy on charity: water

A Rebuttal Worth Noting:

I should mention one thing that charity:water does that isn’t quite perfect from a technical point of view. If you browse the site enough, you’ll notice little places here and there that they break their own rules. For instance, in some places, paragraph text is serif, where on the bulk of the site it’s sans-serif. The result is a slight break in the cohesiveness of the site… these inconsistencies are minor on this site, but it’s important to keep in mind that if your own design is feeling “scatterbrained”, it’s worth taking the time to go through each and every type-style to reduce the variety of styles that you have in use.

Strategy 03: Using InfoGraphics

I’ll keep this explanation short and sweet: if you have information that’s best represented as a graphic, show it as a graphic! People are visual-thinkers, don’t beat around the bush by trying to explain something with words that is easier described with a visual.

Strategy 04: Coupling Image with Text

This is similar to the third strategy, but it’s warrants it’s own brief explanation. Often, you’ll be trying to design a page for content that’s so complex, so academic, so data-driven that using just text or an infographic alone won’t deliver the message effectively. In these cases, it’s worth considering how you might pair an image with text. The text is still where the raw information will be, but the image will act as a “softener”, making the information appear simpler than it really is – which encourages people to actually read it!

Strategy 05: Unique Layouts

It’s the “One Trick Pony” of web design; The organizational paradigm that you see when you visit most sites is this: 1 custom designed homepage, 1 call-to-action page, and 1 template for everything else. The notion of using just one template to handle the majority of a site’s content is shortsighted though! Using just one template bores visitors once they leave the homepage… instead of continuing that motivational high, these “one size fits all” templates invite users to leave the site once they feel like they’ve gotten the main idea.
Where charity:water succeeds is that they use a wide variety of layouts across their entire site. The result: content feels fresh on every page. Visitors are encouraged to keep on clicking around the site just to see what lies around the next corner. Even better, the design of each page actually matches the content on that page (crazy idea huh?). While developing a wide variety of unique page templates might cost a bit extra, the net effect is that the site actually engages visitors and is more likely to succeed at getting visitors involved.

Another Rebuttal…

It’s important to note that using a variety of layouts isn’t always the right solution. In the case of charity:water, it works because the site has a large enough diversity of content that it actually makes sense to give each type of content it’s own layout. In other sites though, using radically different layouts from one page to the next can break the continuity in a design and actually work as a detriment to the site experience.
There’s no hard rule for deciding when a custom page template is warranted though, so you’ll just have to use your own instincts. When in doubt, use a generic page template – if the generic template hinders the content more than it helps it, consider creating a custom layout. If you do decide a custom page template is necessary, take care to keep the vital information (brand, navigation, account info, shopping cart, etc.) in the same place on each and every page.

Strategy 06: Make the Ordinary Look Fun

Let’s face it: if you’re working on a non-profit website, there’s going to be a lot of dull informational pages that, while important, won’t ooze inspiration. What charity:water has done with these information pages is display them in unique grid layout. By using icons and images along with the informational blurbs, the visitor’s are encouraged to look around and find something of interest to them. More importantly, it makes these otherwise ordinary pages look “fun”, which delivers a subtle message to visitors that even the most dull parts of this organization’s operation are executed with creativity and passion.
The takeaway here is simple: don’t ignore the ordinary content pages! While these pages might feel unimportant, there is a unique opportunity to surprise visitors by creating intelligent approaches to displaying this kind of content.

Concluding Remarks

I like the charity:water website… I really do. Each page feels fresh and it actually makes me want to get involved. Some might say that this is the sign of a genuine cause – a crisis so important that people are simply drawn to participate. I’m going to go out on a limb though and say that the effectiveness of the site has as much to do with the design as it does the content. Sure, if the cause were “donate $5 to Steve Jobs”, I wouldn’t really care about it regardless of how well designed the site was (some might disagree with this, haha!), but this is one of those wonderful times where design truly can make the world a better place.
Thanks for reading this year’s Blog Action Day post! Drop some comments off below.
Read More

Planning Ahead: Ways to Improve Your Web Design Workflow


If you’re looking to up your game as a web designer, the planning phase is probably the single most “bang for your buck” skill-set that you could work on. Sometimes it seems that in the dizzying world of web design blogs, roundups, and screencasts, people just skim over the part of the process that makes everything else possible.
This post marks the first in a series where we’ll be examining the “planning” phase in web design. The goal: to better understand the role that planning plays in design; when it’s effective, and when it’s wasted.

Why Plan At All?

Some web designers feel that planning has become a somewhat irrelevant part of the creative workflow –“Why bother planning when I can dig right into the creative phase”?; this kind of attitude is great for the designer who doesn’t mind spending an extra 10 hours on a project for the fun of it, but for others it’s a waste of time to ignore something so integral to the design process.
Before we really dig in, it’s probably important to explain what kind of planning I’m referring to – I’m not referring to the type of plan that involves “guessing” and falls apart minutes after the project starts. What I am talking about is a plan that will eliminate guesswork, define goals, and establish a solid foundation for you to get creative with. The art of planning is more like a “brainstorm with a purpose” than it is a comprehensive technical spec.
It’s a waste of time to ignore something so integral to the design process
Planning is the formative phase in any project – it doesn’t hinder the creative process, it defines it. A good planning session doesn’t even require a lot of time or energy, but the benefits will last far into the entire duration of the project. A thoughtful approach to planning will help boost your creativity, save you time in the creative process, and make you look like a rockstar to clients!

When Should You Plan?

Before you even fire up Photoshop or your favorite code-editor. Design Planning is about setting the overall mission of a project, so it’s important that you define the ultimate goal of the website that you’re going to be working on before you approach it creatively. Some top level questions you should ask are:
  • Why will people be visiting the site?
  • What function does it serve you or your client?
  • What needs to happen for this design to be a success?
Answering these questions early on will save time, energy, and money in the long run, but more than anything, it’ll help you to figure out exactly how your website design is going to rock! Something as simple as spending 15 minutes planning out your ultimate goals can help refine your purpose and make sure that you don’t miss the bigger picture.

What Should You Plan?

Planning is going to be a little different for everyone out there – some sites are straight forward and require just a few minutes of planning; others are big, complex, and can spend days, weeks and even months in the planning stages. I’ll be discussing these steps in more depth in future articles, but I can outline about 6 crucial planning steps in any web design project:
  1. Define Success
  2. Define the Content
  3. Define the Features
  4. Consider the Audience
  5. Do the Research
  6. Organization, Hierarchy and the Wireframe

What Does Planning Look Like?

The actual format of your planning can be anything from an elaborate creative brief document to a sketch on the back of a napkin. Honestly – use what works for you and don’t try to force it. If you aren’t ever going to go back and read an elaborate creative brief, then don’t bother writing one! The trick is to use a planning format that works for you and your workflow genetics. I happen to love the idea of hands-on notepads; especially those snazzy Action Books from Behance – but realistically, I know that I do my best planning using a simple text-editor app: no frills, no formatting, no distractions. Your planning method is going to look unique to you though – so take some time to consider what works best for your own personal style.
The actual format of your planning can be anything from an elaborate creative brief document to a sketch on the back of a napkin.

Know the Limitations of Planning

Let’s make one thing clear: designing a website is a lot like building something in a vacuum; Try as you might, you won’t ever be able to plan for every possible outcome when your site hits the web. The likelihood that your design will cover every possible scenario for the next 2-3 years of that site’s life are slim at best. The site will change, the visitors will change, heck, you or your client will change.
The planning stage isn’t for defining each and every tiny variable, it’s for painting broad strokes and establishing your overall strategy. Planning each and every detail will ultimately fail because it will force you to make guesses – and regardless of how educated a guess might be, it’s still just a guess. Keep your planning focused on the big picture stuff that will stay the same throughout the project.
In this series of articles, I’ll be introducing some tips, tricks, and other techniques to improve your own planning process. I’m going to be catering this series towards newer designers, but it’s my hope that everyone can glean some useful information!
Read More
Subscribe to: Posts (Atom)