ITzetta LLC Logo

ITzetta Blog

This Blog covers some of ITzetta LLC's adventures as a growing design and outsource IT firm.

Web App User Interface Design - Pt. 1

Elisabeth Windsor - Tuesday, May 08, 2012

Right now at ITzetta, we’re working on a web application for one of our clients. So, what would be a better topic than web application user interface design? Thank you Smashing Magazine for providing a post on this very topic! User interfaces are one of the most important aspect of application design, but often get overlooked. A good user interface will bring more profit to a company and provide great user experience.

Many times the developers are left with the task of designing the user interface, but really this should be a job for designers. A developer’s limited experience with design can leave users frustrated with the end result. A designer should know how to design a user interface to be visually appealing as well as easy to navigate.


A website is made up of mostly static pages and is meant primarily to inform. A web application is a dynamic, interactive system.


The best user interface will cater to the user and help them to complete tasks quickly and easily. Knowing who your user is and what their skills and experience are will help with that. Is this a tool for computer-savvy developers within a company or teenagers, who will not have as much experience?

It’s important to remember that you and your client are not the users. The web application should not cater to either of you. You can identify the user through interviewing the client, shadowing or interviewing potential users, or creating personas (if you don’t have access to real users). Personas are a representation of what a real user would be like.

Task analysis is a method that allows you to see what users need to accomplish by using the app, how they do it, how long it takes, and what problems they encounter. Understanding how all this works allows you to create an app that works for their needs.


Start out with sketching. Sketching is a good way to quickly try many different rough ideas. Lots of these will be thrown out, but once you have a solid sketch, you can turn it into a more detailed wireframe.

From there, you can create a mock-up. This is just a picture of what the design of the interface will look like. It has no functionality whatsoever.

The next step is to create a prototype. A prototype is an HTML version of the web app that has little to no functionality. It is simply to simulate the user experience.

Testing is the next thing on the to-do list. The information you get from testing will send you back through the cycle of making sketches, mock-ups, prototypes, and testing. You should continue doing this until all the major issues have been fixed. Only then can you begin creating the final version.


Check back next week for the next post in this series. In the next post, we will cover the design principles, necessary components, and design patterns of user interfaces.

Post has no comments.
Post a Comment

Captcha Image

Trackback Link
Post has no trackbacks.



Get Support

Ask Us