Guest Blog | More Than Just a Pretty Interface
August 1, 2017 by Kunaal Sharma

We’re baaack with another exciting topic for our guest blog series!

In this exciting sequel to our popular blog, Why a Business Analyst is the Ace Up Your Sleeve, we welcome Kunaal Sharma, PixelMill’s Senior UI/UX Designer to the stage to discuss the next step in our PixelMill process, Design. Our design team is passionate about creating a truly custom, unique, and extraordinary product that’s tailored to our client’s unique brand and culture. But how does this all work exactly? Join Kunaal on this journey through the building blocks of design and find out how PixelMill makes your site more than just a pretty interface.

Innovate + Design : How PixelMill Does SharePoint Your Way

Hi, I am Kunaal, PixelMill’s User Interface & Experience Designer. The foundation of the Design phase is built during the Discovery phase. These two phases usually overlap each other to create a strong foundation for your project. I’ll walk you through some of the major activities that take place during the Design phase that brings your project to life.

Wireframe

What is a wireframe?

Wireframes are simplified, black and white drawings, of your site’s layout that outline the placement of features and elements (items that are discussed in the Discovery phase). It serves the same benefit as an architectural blueprint, focusing on the foundational elements before adding any creative elements.

Wireframes’ main purpose is to:

Define the structure of your site

Outline the layout of your site

Delineate the navigation of your site

Assign content hierarchy and priority

Serve as a reference point for functional specifications

Benefits of Wireframing

Wireframes play a critical role in the project process by saving our clients time, energy and money. It’s a quick and easy way for clients to evaluate the site structure and design. Instead of combining functionality and layout with branding aspects of the project, wireframes ensure that focus is on one of the elements. Wireframes help clients visualize the site’s functionalities and gives them the ability to provide feedback early in the process. Wireframes also make the design process more efficient. Skipping wireframes would delay this valuable feedback, potentially increasing the cost of making changes to a fully branded mockup instead of simplified wireframes.

Not only does wireframing benefit the client, it also provides room for designers to experiment. This helps make the process more productive while bringing out the best possible solutions to providing the cleanest experience for the end users.

Wireframing fosters a clear communication channel between Clients, Business Analysts, UI/UX Designers, and Developers. This ensures that everyone is on the same page and is aware of each feature and how it’s meant to function.

Mockups

What is a Mockup?

A mockup is a static, fully branded, visual representation of your project. Essentially, it’s a visual guide of what will be built during the Develop phase of the project. Mockups bring the wireframes to life by adding in colors, images, typography, etc.

Benefits of Mockups

Encourages the review of the visual side of the project

Saves time on development as it allows for feedback while changes are much easier and more affordable to make

Helps stakeholders and eventually end users adopt the product quickly and easily through consistent branding

Prototyping

Prototyping gives clients an interactive example of the mockup which helps them understand the interactive elements that a static wireframe or mockup cannot demonstrate. This also gives us the opportunity to discover any potential features that could have been missed during the other two activities happening in this phase.

Prototypes allow us to receive important client feedback and incorporate changes iteratively. Once we have something tangible to present, the client reviews and tests it, and then we make any necessary changes. We repeat this process until we’ve met all the product requirements before we send the final design to our developers for the build.

Advantages of Prototyping:

Allows project stakeholders to see how the final product will look and behave early on.

Encourages feedback from project stakeholders and users to ensure the product is on the right track.

Saves time when handing off the project to developers. Developers can reference the interactive prototype instead of a static Photoshop file.

Design Squiggle by Damien Newman

The Design phase brings clarity and focus to a project. We start to visualize how the product may look and behave while always following the goals and expectations defined in the Discovery phase. The activities outlined above all play a crucial role in keeping the project goals in line. This phase produces visual references for stakeholders and developers alike that ensure the product is not only visually appealing and true to your brand, but that it also functions and behaves in the most efficient way for your team.