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...
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
- 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!”