What is your process to create beautiful and functional UI design for web and/or mobile?

I design website from start to finish and started as a freelancer.

The method I use is a variation of User Experience Design. You are not designing a website for yourself or your client. You are designing for users. So do some research on User Experience Design especially in the website design field. This will help you build websites that have value for your users which means value to your clients because of the traffic flow and potential customers. It needs to have value for user before they invest their time. A great design is one that looks great but is functional as well. You have to remember users don't come to your website because it looks nice. Take Quora which is very plain and simple. It looks clean and easy to find things. Users want to type a quick question and have others quickly answer them. So adding a lot of bling and glamor is just going to frustrate or distract users from the reason they come to this website and creates an unpleasant experience.

I've learnt a lot from different sources but This Week In: Webdesign really helped me a lot. You can watch them on Ustream or watch episodes on tube http://www.youtube.com/show/thisweekinwebdesign . They even had a few episodes where they show you how they implement everything and they where using a real clients website.

Some stages/phrase you can implement in your projects:

1. Briefing
Here
you spend time with your client to understand what they want to achieve through the website. You find out about their company, employees customers etc.

2. Strategy
Here
you determine what purpose the website is fulfilling for your client and the users going to use the website. Why are the users going to come the website? What do they need from the website? Who are they?

E.g. Users are coming to our website to review books and find out what books are good etc.

3. Scope
In this phrase
you determine what features you will use on the website. The features you use must be centered around your strategy and you also determine whether you have the resources for the features and what resource you will need. At this point your content collection will also be done as well as SEO research. You'll also decide whether your website needs to be available on different formats and which formats, this should relate to your user research.

E.g. A search box so user can easily find books, a latest release section, a user review section so other users can recommend books. We will need to start off with a database of 1000 book reviews etc.

4. Structure
Here
you will determine what the best ways are to move the users through your content and website.You will chart-out and document the flow of information, how the user moves from one point to the next.

E.g If the user click on the review link what happens, where do they go and what do they find and see on the next screen.

5. Skeleton
This is where
you give bones to your website. You design layout in form of wire-frames whether basic or more structured. Usually no content is placed and you use symbols to show what will go where on the website.

E.g. a wire-frame showing where the main navigation will be vs the main content.

6. Surface
This is where everything comes together. This is where
you design the layout, look, style, feel or your website. This is where you will see how it looks. How big will the headings be? What colours you using for background and why? What colours for what type of content. Each and everything thing you visually place in the design must have a function related to the previous phrases.

E.g light blue background to relax users. Light gray text for main headers for high contrast to draw the eye towards the headers. Red big text against white background in main banner to create focus on sale.

7. Representation
Here
you will present to the client. Don't just show them what you have done but explain the features and how they work and related to the user and your client. The more smiles you get for each feature the more likely your client will be impressed. If you just show your client the design they are going to say yes or no. By explaining your client can see how everything works and why you did certain things.

E.g. The search box we put right at the top. We made it big so it's clearly visible so users can use it to search for questions already asked or some they might want to answer. We've added a big button so users can easily ask a question. We've added a small red icon for new notices on the home button. The red colours shows urgency and it has the number of notices in the icon.

8. Development
Once the client is satisfied
you take the project into development where it is coded, tested and then goes live.

In this way you create a great design that has functionality and gets users to invest time because they find every feature valuable on your website.

The time it takes depends on the size of the website and the quality you want to produce. If you want to create better website you going to have to invest more time to complete the different phrase.

The software I use:

  • Abode Photoshop, Illustrator, Fireworks, Flash for designs layouts and images
  • Dreamweaver for coding. Don't use text editors as it takes too long and too much energy to code. Don't use wysiwig programs as your option for functionality will be limited. Dreamweaver can help you code and avoid errors.
  • Microsoft Project for project management
  • Microsoft Visio for wire-frames, charts and flow charts for project documentation


I tend to steer away from CMS (Content Management System) as they use templates. If
you can design and code your own templates then this is great. In most cases I find out what my client wants to edit themselves and design a interface for them very similar to CMS.

My opinion is CMS takes a design template and basis content on the design. For User Experience Design it's taking content and creating a design based on the content.

Hope you find something useful.

Leave a Comment

Your email address will not be published.