Friday, June 5, 2020

Chapter 04: The 5-step Landing Page Prototype Guide

Chapter 04 The 5 step Landing Page Prototype Guide

By : Felix Wong


A prototype is an important milestone in the landing page creative process that bridges design and development. This step includes a design overview, user experience analysis, feasibility testing, and more, and is important for building an optimized final product.


The prototyping process is not linear, and each process exists for a critical reason. It starts with basic sketches and moves on to low-fidelity (lo-fi) wireframes, followed by high-fidelity (hi-fi) interface design. Because these items are all in one family, each step builds upon the previous one, gradually making the design smoother. 


Let’s get started


How do you plan an efficient prototyping process? Where in the process does interface design belong? When is the best time to start copywriting? The answers to these questions depend both on your resources and how you find a balance. 


There’s no one-size-fits-all solution, but as a regular UI/ UX designer for tech products, I always go through these 5 critical steps:


  1. Information Architecture
  2. Wireframe
  3. Copywriting
  4. Lo-fi prototype
  5. Hi-fi prototype
  1. Information Architecture (IA)


Information Architecture (IA) is a user-centered methodology which you can use as a foundation for your wireframe and user flow. IA plays a significant role in organizing the design elements, hierarchy, and navigation.


Companies sometimes ignore IA because it’s time-consuming, and it requires pooled efforts from various domains. However, unsatisfying user experience is often caused by substandard IA within your design process. It’s worth spending time on IA because it is the foundation of efficient user experience and makes your website easy to use.



Spotify Information Architecture by Juliana Zainal


  1. Wireframe


A wireframe is the most straightforward design layout. It provides an overview of the landing page’s structure and the elements required for the next stage. The good thing is, you don’t have to be a designer to make a wireframe. Wireframe design only requires identified components such as a headline, call-to-action (CTA) button, list items, images, etc. It is important to keep your wireframe as simple as possible, as this makes it possible to quickly put together new versions.


A successful wireframe is aiming at:


  • Bridging the gap between sketching and digital prototypes
  • Displaying the page structure in terms of the position of components
  • Visually display the navigation flow of the user interface 

22 300x225 1

Landing page wireframe by Nicholas Swanson


  1. Copywriting


Still using “Lorem ipsum” as a placeholder while you design the page? Instead of doing this, you  may find it more helpful to start writing while sketching the website layout, and make it part of the design process. 


Using specific and meaningful content in design allows you to assess how suitable the content is when placed alongside the main components of the page. This will come in handy when it’s time to put your prototype into action and test its look and feel. 


Using these initial impressions, you can also capture how the user is using your product and where you need to make improvements. Check out the Five principles for great interface copywriting written on Google Ventures by John Zeratsky.


  1. Lo-fi Prototype


Although it seems like an extra step, creating a prototype can get your design live faster. This process is crucial for creative discovery before building the actual product. 


You can start by digitalizing the wireframe by turning each component into a pixel-perfect form that fits a designated interface. Marvel App offers a comprehensive library of greyscale components where you can build up the lo-fi prototype in just drag and drop. Here’s an example of a transition between wireframe and lo-fi prototype:

33 1024x409 1

Wireframe to prototype by Matt Warcholinski


  1. Hi-fi Prototype


A high fidelity interface is a functional prototype that almost the same as the final output. The majority of UI designs seen on social media, Dribbble, or Behance, are hi-fi prototypes.


Landing page builder by Figma


At this stage, you can dive deeper into every component–icons, visuals, content, navigation, and more. A successful hi-fi prototype enables better and more detailed feedback that you cannot gather from wireframe and conceptual ideas. 


A hi-fi prototype should include most of the essential components and design elements, and is needed when you are ready to test the usability of your landing page and move on to the development stage.


As tedious as it seems, remember that whether you are designing a landing page or another digital product, always test different levels of prototyping fidelity. There is no-one-size-fits-all solution. 



Email This Post Email This Post