User Interface

Wireframes -
A website wireframe suggests structure of a website and relationship between pages. It is a simple line drawing which demarcates different regions in webpages. Wireframes are the first step to any interface design. Art work for any web application / user interface begins only after wireframe is approved by user / client. 

Wireframe should include all important elements of the web application. Each element can be represented with simple shapes with label to represent the same.

General and most important elements of any website includes -

  • Company Name and logo
  • Navigation links to other webpages
  • Content area
  • Search box
  • Admin / User login area
A simple example for wireframe
wireframe

How to create Wireframe -

OmniGraffle is one of the popular tools to create wireframe. There are so many other ways to create the same, like I use Adobe Fireworks to create them.

If you are discussing interface structure with the client (face to face), pen and paper would be the best option or if you have to send in a soft copy to the client any software tool such as Adobe Fireworks / Adobe Photoshop / Adobe Illustrator should be just fine.

Benefits of Wireframe -
  • Revisions are simpler and faster
  • Helps the client focus on page flow and usability with no distraction on art work
  • Saves a lot of time for designer as well.

----------------------------------------------------------------------------------------------------------------------

User Interface Prototype -
User interface prototype is a mock up of web application which is build keeping focused goal in mind. UI Prototype represents basic ideas behind the UI, which is generally tested by client / target market.
UI Prototype is extremely essential as it helps designer / developer / Client to test and explore different ideas and communication. UI Prototype will generally be in form of HTML pages, once the prototype is finalized, development of application / system can continue from there.

----------------------------------------------------------------------------------------------------------------------

Storyboard -
User interface flow diagrams is called storyboard. Storyboard help brainstorm on fundamental usability and relationships between major user interface elements.

----------------------------------------------------------------------------------------------------------------------

Usability -
Usability means creating user-friendly / user-centered design environment. It is the ease at which user / potential customer can interact with web application and attain desired goal.

Market is expanding and potential customers have lot of choices to choose from. Usability here plays a very important role to retain customer’s interest in a website. Companies find the benefit of spending money and energy to research and develop user friendly product.

Usability can be refined by employing set of generalized users to test the system for its efficiency, observing their interactivity and updating the system based on observed notes.

----------------------------------------------------------------------------------------------------------------------

Website Layouts -
There are a whole lot of criteria for a website layout to be successful.

Few of them are listed below -

  • Consistent navigation
  • Proper use of space
  • Clear and crisp content.
  • Quick links to services / products
  • Fast loading web pages 
  • Graphic design / CSS should be easier to visitor’s eye.
    Example – website colors and font size
  • Use of relevant images along with content
  • Relevant content with proper keywords

Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2011 Imajine.