Wireframing

Defining the structure and flows of the site.

Drupal wireframing overview

Aim

Capture the insights from the discovery phase to produce wireframes for key pages demonstrating user flows, components and page layouts.

Approach

Using the insights from discovery produce wireframes using a component driven approach and software such as Figma to prodce medium fidelity wireframes. Wireframes should indicate components, functionality and priority of information.

Outcome

A set of wireframes which visually represent the structure, functionality and flows for key pages on the site. Wireframes can be used to test and validate the discovery findings and to provide a guide for developers implementing the designs.

Drupal wireframing

Wireframes form part of teh design process. They  can be used to simulate a space where the user can interact with a client’s service or product. With these design ideas we craft low-cost experiments to test on end users to make sure we have met their needs.

Wireframes can be further developed into Visual Designs adopting a client’s brand guidelines and style guides to deliver a look and feel that represents their brand. We can also take these designs into another stream of iterative user testing.

Component library

Convivial CMS is Morpht's starter site for personalized websites. We have developed a component library in Figma to aid the design process. The Figma file can be used to rapidly build out medium fidelity wireframes of a site.

Convivial CMS components for Figma

Insights

Wireframe mapping of a portion of a web page on paper
Article

At Morpht we care about the user experience and adopt a proven UX design process. it all starts from a discovery process in which we chat with clients about their vision and expectations.

Speak to an expert

We would love to hear about your project and what you have in mind.
Book an appointment with a Drupal expert to see how Morpht can help.

Make an appointment