Wireframe to Website Application

Introduction

Starting with a wireframe, start planning how to start building a website application…


In the world of web design, the language can be very misleading, even for well seasoned designers. So don’t allow terms such as; wireframe, user-flow and framework confuse you with images of complicated diagrams, with signs and symbols that only someone with specialised “secret” training will understand.

Wireframe Schematic Drawing

Step One

Start the initial planning for your website application

Wireframe

Begin with a schematic drawing of the journey you wish to design for your audience. This is known as a ‘Wireframe‘ drawing or guide. With the use of rectangles, diamonds and arrows, shows how a user will interact and navigate through the web application you are designing.

This is the initial planning stage for working out the type of interface dialogue and response to user actions you may need to consider. This is a good way of answering, and discovering, the possible actions a user is likely to make whilst using your app.

The Basics of User Experience Design by Interaction Design Foundation

“Whether you’re looking to embark on a new career in the field of UX design, are trying to boost your current skill-set, or are simply interested in learning more about the topic, then this short ebook is the perfect place to start your journey!”

Screen Design

Step Two

Design layout, look and feel...

17 Presentation rapid prototype mode
Overflow app

Screen Design

This is the step where you start forming a better idea of how your completed web application will look.

Using your wireframe (hand drawn or using software) as a guide, start constructing the layout or user interface that your audience will interact with. Whilst you can also use software such as Adobe Photoshop and Affinity Photo to do this. There are dedicated software solution that can do most of what you need, without necessarily using any other software.

Prototyping

Step Three

Produce an animated prototype

Prototyping

Ideally at this stage you will have a completed design or section of your website application completed, and now wish to demonstrate how the user interaction works with an animated prototype.

Tools

Web Design Software List

Wireframe

  • overflow.io allows you to integrate with Sketch, Figma, and Adobe XD, providing quick and seamless synchronising of your designs.
     

  • justinmind.com design hi-fi wireframes for web and mobile applications.

    All-in-one prototyping tool for web and mobile apps, from wireframes to highly interactive prototypes

Design and Prototype

  • Adobe XD a “go to” UX/UI app used by professional web application people. Create prototypes and collaborate with team members

  • flowmap.com is a full-stack user platform, that allows you to “design exceptional UX for beautiful products, websites, and apps
    with the online collaborative tools…”
     
     

The Basics of User Experience Design by Interaction Design Foundation

“Whether you’re looking to embark on a new career in the field of UX design, are trying to boost your current skill-set, or are simply interested in learning more about the topic, then this short ebook is the perfect place to start your journey!”