In this post I'm going to show you a set of twenty screen mockups for a real world project that I've been working on - the upcoming redesign and rerelease of our design and inspiration gallery FaveUp. I'll explain some of the why's and how's that went into the design, how I use design mocks to spec out a web app, as well as some general notes on the design. The new site that we're calling Creattica Inspire is now being developed by our crack Melbourne development team and will be hitting the interweb tubes as one of our first releases of 2009.
From the Old: FaveUp
Creattica Inspire is actually a rebuild of an existing site we run called FaveUp which is a gallery of logos, business cards and websites. To be honest FaveUp is a site that succeeds despite itself. I had it built a year ago by an outside contractor and it's not actually very well put together - anyone who has submitted to the site will know that it's quite buggy. Design-wise as well it's got some real problems - a weird "logo", an interface that goes wonky on some pages, a dumb rating system that you can fool really easily, and perhaps worst of all it's pretty ugly. All in all it's what I like to fondly term "a giant pile of bum".
Nonetheless the site has a few things that seem to work well on the site, the main one being that it has a really strong focus on the content. When you scroll down a page, you get design after design, and not much else. It's simple and clear, and that counts for a lot in making a site usable. Here's how the current FaveUp site looks:
The old (current) FaveUp site
To the New: Creattica Inspire
So we're pretty much rebuilding the system from scratch and importing all the old content. The new site will sit at inspire.creattica.com and will be part of the suite of creative sites and services that we're building at Creattica.com. So some weeks ago I set about redesigning FaveUp and at the same designing a look for Creattica. The end result are these mockups that I'm going to be discussing:
Click here to view the 20 screens
The screens are a set of mockups built into HTML that are meant to represent all the key screens on the site. The developer on this project Erin is now merging them into the codebase and then we'll update and modify it into the final product.
Unfortunately the dark design had to go, the new site is much cleaner and more usable
So what I've done below is to use this design as a way to talk about my own personal processes and thoughts, tied to a real world project. I hope you find the notes useful!
Tips for Redesigning a Site
Redesigning a site can be a tricky process because you have to deal with the weight of expectation, the resistance of users to change, and the ever present spectre that you might be making a step backwards. In my experience the trick to a succesful redesign is to preserve the overall feel of a site and capture some of the hallmarks of the old design into the new one
Preserving the "feel" of a (successful) site
By keeping that feel you ensure there is a continuity in the site and users still feel familiar with the new site. Preserving the feel of a site doesn't need to mean the new site needs to look the same however. This transition from FaveUp to Creattica Inspire is pretty different! However there are a number of things that keep it related:
- Most page elements - navigation, logo, pagination etc - are in the same locations. This is important because it prevents the user from getting lost or having to relearn the system.
- The key page of the site, the Listings Page, is quite similar to the Old Listings Page. Listings are presented top down in rows, the image is on the left, details on the right.
- The style of the design is not dissimilar. Although the designs look vastly different, both are mostly simple, flat monochromatic designs with a few sharp uses of red.
You CAN change everything, but it's usually best not to do it all at once
Now you can of course redesign and totally change the layout of page elements, or overhaul the key pages of the site, or move to a new style of design. However for a succesful redesign I believe you can't do it all at once. If you're going to move the elements of the page around, then you should be keeping the design and look really similar. If you are going to totally change the design then at least the positioning should remain much the same.
If you don't keep some things the same, you will lose all continuity and it's almost like launching a site from scratch. There are times when this is necessary (a.k.a. the old site sucked) but in most instances where a site is popular, it's best to keep some continuity.
Ace UX designer Cennydd Bowles has an interesting article about how users react to redesigns, where he mentions the five stages of user reaction - denial, anger, bargaining, depression, acceptance.
How Psdtuts+ Evolved
One site that I've redesigned three times is Psdtuts+ itself. If you have a look at the image below where you can see all four designs one after another you'll see that it went like this:
- Weird simple brown design
- WordPress brown design
- WordPress white and brown design
- Streamlined WordPress white and brown design
At each step something changed quite significantly (except maybe the last step), but equally some things always stayed the same. When we moved from the plain HTML site to a WordPress blog, the colour scheme and the design elements stayed the same. When we moved from the brown WordPress design to the white one the placement of everything remained the same - incidentally this was the most controversial step :-)
How Psdtuts+ has evolved with the redesigns
Look out for Logistical Considerations
When you are designing any major site you have to spend some time thinking about the build, but this is particularly true with a redesign. Because we have a fairly large data set to preserve (all those user submissions) it's really important to figure out how you are going to migrate to the new design in as simple a way as possible.
For the FaveUp > Creattica Inspire, one of the big considerations is that we're moving from having a single image per design, to having two - one listing and one detailed. On the detailed page you can see how I've dealt with having no large image (a simple centre with a dark background does the trick).
What Are You Looking At?
A good web design should guide a viewer's eye through the screen. This can be done because different elements on the page can have a different visual precedence based on their size, shape, colour and position. Below are a couple of screens where I've tried to show the path I'm hoping a viewer's eye will take ...
What I think will happen: The inverted white on dark grey text combined with the top left position should ensure that a viewers eye first goes to the logo. The giant "4,230" text combined with all the space around it is also a strong pull. The "Popular Today" section is also placed high up and once it has a bit more visual noise from all the thumbnails should be a strong pull. After these three, the viewer is most likely simply to go down the page.
What I think will happen: Again the logo is probably the first place the viewer will look, followed by the main navigation area which is just below. The secondary navigation area on the right is likely to come last.
If you only read one (more) article today, make it this one:
Andy Rutledge has a fantastic article on guiding a viewer's eye around the screen complete with awesome examples. Read it here: Designing a Guided Tour.
Tips for Working on Information-Rich Sites
When you have this information, there's only so much stylistic design you can do!
Designing an information-rich site is very different to working on a light-weight site. When there isn't a lot of content you can go wild with your design and to a certain extent let the design dominate the content, and that is OK. A good example of a light-weight site is a personal portfolio where even a heavily designed look (check out the neat looking Design Disease for example) still works well and the site is easy to get around and understand.
Understating Your Design
A content-heavy site on the other hand is a different kettle of fish. As a general rule the more content and information on a page the more understated your design needs to be. The reason for this is that with a lot of content on a page, a full-on design will just get in the way and confuse the viewer. It's hard to digest a lot of information at once, and adding a very heavy design to the mix and you risk overwhelming people.
A second, equally important reason to tone it back on the design is to keep the focus on the content itself. On the Inspire site, viewers are meant to be looking at a gallery of design. If the design of the gallery itself is really stylized and aggresive it will detract from the content itself and weaken the whole site. That's why if you go to an art gallery all you ever see are plain white walls, can you imagine if they had garrish wallpaper and ornamental lights everywhere?
The ultimate content-heavy sites of course are news outlets and portals. If you look at Washington Post,MSN, Yahoo, NYTimes you'll find the design on all of them hangs back and is often relatively simple.
Clear Interface Design
Although an information-rich site doesn't require heavy visuals, there is still a lot of work to be done. When you are working on this type of site you have to put a lot more work into making sure your interface is super clean and usable. On the Inspire site I've tried to keep the navigation very clear, make use of a lot of space and use layers of black, red, grey and white to demarcate different sections of the interface.
Tips for Designing Families of Sites
One thing we do a lot at Envato is create families of websites. We have the TUTS family, the Marketplaces, and now we're working on this Creattica family of sites. This has given me a lot of experience creating designs that can be reused on multiple sites to create a unified look. Here are some things I've learnt:
Think Ahead!
When we launched the first Creattica subsite a couple months ago - Creattica Daily - I foolishly didn't plan ahead. Instead I just designed a neat blog design and launched the site without thinking about what I'd do for the other sites. Well as you can tell from this Creattica Inspire look, I've had to start from scratch again. The old look is now up for sale on ThemeForest as a WordPress theme so it's not a total waste, but nonetheless it really pays to think ahead and design a look that suits multiple sites.
Two of the Creattica subsites that we're working on - Inspire and Sessions (a creative skills blog)
Create a Clear Sub-Branding Element
To make a single design work on a few subsites requires at least one sub-branding element. On Creattica and TUTS it is colour, on the Marketplaces it's a combination of colour and logo/animal theme. Whatever you choose, there has to be something to differentiate the sites when you switch between them.
Make Life Easy on Yourself
Maintaining a family of sites is a lot of work, so it's worthwhile making most of the design stay consistent. This not only means users get very familiar with the feel of the sites, but on a practical level it also means you don't have to do as much work!
Research & Inspiration
Good ol' CNN is where I got my inspiration for Creattica
Before starting a project like this one, I always take some time to go surfing. Aside from making my job a whole lot more enjoyable I generally have two aims in mind:
- Researching competing sitesThere are heaps of design galleries around, ranging from the innovative - PatternTap & DesignFlavr - to the more traditional - CSSMania & WebCreme. All of these sites are tackling the same sorts of problems as Creattica Inspire, so together it's like getting a huge panel of designers and seeing their take on solving those problems. When browsing them I try to take mental note of features and design solutions that I like. I generally avoid screenshotting, that way, later when I am designing the ideas come back out with my own interpretations - looking directly at a design while designing is hazardous as it's all too easy to turn inspiration into just pure immitation.
- Finding design inspirationI'd say it's a 50-50 chance that when I sit down to design something that I manage to just draw out an idea from scratch. The other 50% of the time I have a starting point in some aspect of another design.So what's the inspiration behind Creattica Inspire? It's a little site called CNN! I was looking at CNN and how they manage such a large amount of information and so many subsites, and decided I quite liked two things about the site - the overall layout and the idea of white boxes on a light grey background.Do the two designs look the same? Not really. Can you see the resemblance now that I've pointed it out? Probably - especially since they both use red! Is this a bad thing to do? I'm not sure. I do think it is disingenuous to pretend that I'm working in a vacuum and I am somehow inventing new ideas.I guess my own take is that it's OK to take inspiration from other designers - in fact I think it's impossible not to. It's not OK to straight-out copy designs. So consequently if you're inspired by another design it's essential to give it your own spin and interpretation and let it develop to the point where it bears little resemblance.What's your opinion? Is inspiration OK? When does it fall over into immitation? Is my example too far or OK?
Tips for Working on Web Apps
Inline administration reduces the design and development overhead
A project like Creattica Inspire is interesting because it involves a lot more than just building an HTML site or even skinning a CMS product like WordPress. It's large enough to involve some development issues, multiple access levels and a variety of features. Here are some of my thoughts on working on a web app:
Flexible design for growth
On large projects like Inspire or FlashDen it's pointless to try to think of every single screen that is or will ever be on the site. Trust me when I say there are pages you will somehow overlook, or new features that no-one's thought of yet that will have to be worked into the design later in its life.
A much better plan is to design a flexible and modular type structure. The Inspire design is done in such a way that a new page could be easily constructed by throwing together a few of those white boxes, adding a new menu item or submenu item and using standard design elements like mini gallery listings or user comment boxes. There may be some more design needed in the future, but certainly creating a new page or feature isn't going to break the layout!
Consider Inline Administration
Almost any web app will involve some sort of administration. In the case of Inspire we need to be able to approve new designs, edit items and so on. In the old days I used to always design a special admin area for functionality like this - kind of like how WordPress has that WP-Admin dashboard. Although in some cases having an admin area is a good idea, in many situations it's better to go with inline administration.
Inline administration means working in extra functionality into the regular front-end design that only appears when the user is an admin. So for example on Inspire when a user is an admin they will get a couple of extra features on regular pages. For example they can search the site like a regular person and then edit items they find.
The reason inline administration is preferable here is we are already building a set of ways to navigate the site, like search and tagging, as well as a great way of viewing the site's content, so why redesign and rebuild all of that again in an admin area. With inline administration a user can send you a link to an item and rather than relooking it up in the admin area you can edit right on a page.
Briefing Developers
Key screens map out the major functionality of a site
On some jobs you will serve as both web designer and project manager. In my case it's because of my job at Envato, but even in regular client work, you may be commissioning and developing a project on behalf of your client. In situations like these you'll need to brief a developer or developer team to actually build the project you're working on.
There are a variety of ways to brief and work with a developer on a project. A lot of them depend on the size and scope of a project. For a small-ish project like this, this is what I do:
- Plan out an overview of the projectBefore doing anything else it's essential to have an overview of the project. I usually write a few lines to a couple of paragraphs explaining the project, roughly how it works, links to similar applications and sites, and so on.
- Figure out every key screen - both functionality and design wiseIn any project there are a number of screens that demonstrate the main functionality of a site. If you look at the set of Creattica Inspire mockups you'll see that there are definitely going to be other screens on the final site, but that these 20 encompass most of the functionality of the site.Additionally from a web design point of view, these 20 screens take into account pretty much every major type of layout for the site.
- Either wireframe or mockup the key screensNext I will mockup those key screens. In theory I guess I should just be wireframing (i.e. laying out a very plain, boxes and lines plan) but in practice I actually prefer properly designing.I tend to think that real designs illustrate functionality better than wireframes - but that is pretty debatable.
- Write out a set of notes to accompany the screensNext I will write a set of notes explaining each screen including unusual elements on a page and how they would work.
- Write User ScenariosUser scenarios are little stories about how a person might use the site. In telling the story you reveal the functionality of the site. So for example: "Bob visits Inspire for the first time, he clicks on a popular design on the homepage and gets taken to the details page. He quite likes the design so he hits the "+" vote button and is presented with an alert to let him know he needs to login or sign up. Bob clicks the sign up button ... etc".Theoretically you can spec out an entire project using user scenarios and there's a lot of literature in software and web development about it. I recommend reading JoelOnSoftware's User Interface Design for Programmers - even if you are a designer and not a programmer!
- Hand over and Discuss!Finally I would email over to the developer the overview, the screens, the notes and user scenarios. Then we discuss any questions and areas which need more clarification.
The point of these steps is this:
- Mocking up key screens forces you to think about every feature and aspect of a site
- It also forces you to add in a lot of small features and buttons and widgets that you otherwise forget when just doing concept designs
- The key screens illustrate really well how a site should work. If you do the right set of screens it's a little bit like visiting a site itself
- User scenarios will flesh out anything you forgot in your key screens and force you to think through all the major ways a site will be used
So that's my rough process for briefing a developer. What do you do? And if you are a developer yourself, is there anything I should be doing better?
For a more thorough treatment of briefing a developer you might like to check out How to Create a Web App on ReadWriteWeb. You can also talk to your own development team to see what they need and want.
Final Thoughts
I think the reason web design is such an awesome job is because there are so many different facets to the job. In this article I've tried to show how a single website design job can involve all sorts of skills and problems - from design inspiration to working with developers, from keeping users happy in a redesign to planning how a site will be administered. Sure it's challenging, but that's what makes it so good!
As for Creattica Inspire, we should see it make its debut early in 2009 (I can't believe we're just around the corner!) and you'll hear about the launch right here on Psdtuts+!