After completing user research and competitive analysis for your new app, your next steps involve the actual structuring of it. This is where you really get involved with what elements will be in your app and how your app will be laid out.
Information architectures are all about navigation. When structured correctly, they allow all the elements within the application to flow naturally as users click on different pages. Your app can have a wonderful UI design, but if this structural step is skipped your user may become confused and never use the app again (Information Architecture. Basics for Designers). When laying out this information, make sure everything goes together accordingly. Make smaller related pages off of main pages and include any additional elements that may help guide the user. Creating a legend key for your information architecture is important for differentiating between pages and different functionality (The Comprehensive Guide to Information Architecture). Everything in the IA should be laid out neatly, with room for possible change and additions.
After completing your IA, it’s important to sketch out wireframes before incorporating your branding. The main points of creating these wireframes are to present the information that is going to be displayed, make a visually structured outline of future screens, and show the overall direction the UI is going in (How to make your first wireframe). Sketching out these screens will allow you to work through any structural kinks before final branding is added.
Wireframes are a step to be collaborated on as well. They are not the final prototype, so working through them with coworkers and customers to redraw as needed is encouraged (The Definitive Guide: How to create your first wireframe). These steps are all crucial in creating a successful final product.
Many people go about creating wireframes in different ways. Sketching or creating them digitally is common to do. Sketching is preferred by some because of how easy it is to draw and erase things right in front of you. It also can be done by anyone, meaning you don’t need to be a designer or tech-savvy person to sketch out some ideas (How to use paper prototyping within your design process). You won’t be at a future disadvantage while sketching either. Apps like Marvel allow you to upload pictures of your paper wireframes and create digital working prototypes.
If you happen to be more digitally inclined, there are many free resources for creating online wireframes. Many of these sources also include templates of screen sizes and element icons for you to digitally draw with. Sites like InVision, Balsamiq, AdobeXD, and Figma offer these services which make it easy to create online wireframes. Here are the links to these sites:
Drawing online allows you to utilize these templates as well as create neat sketches with straight lines. Either option, paper or computer, works for wireframes, it just depends on you.
Putting detail and effort into these UX steps will allow for a great UI to shine through. Much planning and structural work allow applications to be seamlessly designed the first go around. Even if you haven’t done an IA or wireframes before, they will pay off in the future. There are large amounts of research and websites available to get you started in this process.
SHANNON'S DESIGN BLOG 