Let's Get Technical - Wireframing

Let's get into wireframing! The past few weeks at BioMedware, I've spent much of my time creating wireframes for our new ecommerce website. With a background in software and web development, my experience definitely resides on the technical side, so I was excited to explore the other side of website creation: design. Apparently, a whiteboard wouldn't cut it - my team member introduced me to a design software called Figma: it has a bunch of pre-sized frames, from phone screens to desktop and tablet layouts that you can start off with, plus templates, examples, images, and more.

As you can imagine, the wireframing process has a few steps. These steps can vary between companies and designers, but I'll break down our general process at BioMedware: 

1. Create a low-fidelity draft
The first step is to create a low-fidelity draft which basically just positions the web content - where the header, nav bar, footer, and paragraphs are located relative to each other. For our barebones ecommerce site, and because we had a website to model off of, this took around a week. After gathering feedback and initial edits, we moved on to the next step.

Here's our low-fidelity draft for BioMedware!


2. Create a high-fidelity draft
The next step is to decide on fonts and colors for the headings, subheadings, and paragraph text. My team kept it cohesive with the website feel and logo. We ended up using open sans and Montserrat; since our goal was to keep things simple, we had to veto quite a few fonts in the process. A golden rule: 3 or fewer fonts is generally a good number; more can make your website look messy. Remember, you can always use font sizing and bolding to differentiate between sections without having to change the font. 
 
 


3. Versatile layouts
Next, we created layouts for mobile versions of the site: we ended up doing xs/s (mobile), md (tablet), and lg/xl (desktop). With web content such as data tables, it's important that the information is accessible from any device: I've used many sites (including college websites, believe it or not) that don't make their mobile versions accessible, and just one button being cut off makes their whole page unusable. This step isn't important if you're very aware of your user base and know that your site is mainly accessed by desktop, but in general it's good to create alternate layouts.




4. Prototyping
The last step is prototyping: sharing the content and user flows using slideshows, diagrams, demos, or whatever works best for your project, and you're good to go!

I hope this post provided some perspective on UX and the wireframing process, and thanks for coming with me through the process!

Comments

Post a Comment

Popular posts from this blog

Trust the Process – Client Meetings and Initial Research

Is website design the most important element in tailoring user experience? Not quite, as I’ve learned. The UX design process starts off with getting familiar with your clients and their needs. Our first week at BioMedware, my internship partner and I met with the company president and employees to discuss requirements and the feel of their brand. With a small but high-powered staff of five, it didn’t take long to learn their highest priority: simplicity. They wanted a design similar to their original website, meaning that we had a precedent to base our fonts and colors off of. So what comes next? Initial market research. Knowing what other companies are doing and their reasons for this is a great way to be aware of design opportunities and pitfalls. My team was lucky in this regard – BioMedware had sample pages of competitor ecommerce sites, so we had our research ready, as well as our company’s take on what they liked and disliked. Having simplicity as the highest priority meant never
Read more

Logo Animation: Pick your Software

Image
So you want to create a custom logo animation: you've looked through your different options in my previous post , and decided to use an animation software instead of outsourcing to other services or sites. How do you get started? What software should you use? Things to Consider: Paid or Open-Source? When I started my animation project for BioMedware, I was a beginner and had little experience with animation software. Since I couldn't guarantee satisfaction with my end product, I didn't feel comfortable charging the company for a subscription such as Adobe After Effects. I decided to go with an open-source software to get a feel for animation. On the other hand, if you've had some experience with animation in the past, you may appreciate the security and quality guarantee of a subscription-based software such as Adobe After Effects, with monthly or yearly plans. Typically, monthly prices can range from $10 - $400 for good quality animation, depending on the software used
Read more