Creating an Interface and Interactive Website Design

Interaction design relates to the functionality of the website and to providing the best way for users to accomplish their intended task using various widgets, such as buttons, lists, scrolls, menus etc.

Interface design, on the other hand, relates to presentation and visual aspects of the design. It is a layout and organization of all the components on the screen, including interactive elements mentioned above. It requires answering questions like:

Is navigation clearly visible and differentiated form the content?
Are the buttons placed where users are likely to look?
Are they visually attractive and encouraging to click? Etc.
How to do it on Page Level?

Having done your site map (diagram listing all the pages on a website accounting for all pages showing their hierarchy in the form of upside-down tree), you’ve got the overview of all the pages included in your website. In order to create user friendly website you need to focus on each of the site map boxes, representing individual web pages and flesh out the content with navigation and interactive elements.

Create a wireframe

The best way to do it is to create a wireframe. It is detailed diagram drawing, which helps to plan the content and interaction design of every page. You could compare it to an architectural blueprint, but detailing the content, interaction and navigation plan of the webpage rather than a building. It represents a visual distribution of content and features on every single web page.

You do not have to create a wireframe for every single web page though. When designing an extensive website you only create a wireframe for each unique page layout and they became your templates. It is a common practice, that for containing around 500 pages, only 20-30 different templates are created. It is especially a case when designing e-commerce site. It may have hundreds of product pages. Every page will detail the product picture, price, features, specifications, customers review etc. All of these pages can utilize one template design. Design is the same for all product pages, and it is the information that varies from page to page. Specific for each product data and images are stored in CMS (Content Management System), database that contains all the information, which are then fed into individual the template in order to create unique pages for every product.