Guest Blog | More Than Just a Pretty Interface

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 

  designblog_wireframe_example 
 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

Example Mockup
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
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.  



Kunaal Sharma
Senior UI/UX Designer
Batman Junkie
Your Composition Confidant

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Are you preparing to launch a new #SharePoint #intranet?

Don’t spring it on employees out of the blue. First, talk to as many of them as you can.

Planning is just phase one. For all of our tips, watch our recent webinar with @EricOverfield!

https://pixelmill.com/webinar-recap-9-takeaways-from-a-migration-to-sharepoint-online/

Are you preparing to launch a new #SharePoint intranet?

Don’t spring it on employees out of the blue. First, talk to as many of them as you can.

Planning is just phase one. For all of our tips, watch our recent webinar!

http://ow.ly/dsQM50GqPI5

It's that time again! Join #Microsoft MVP & Regional Director, @EricOverfield on Thursday, October 28th, at 11:00 AM PST as he walks through #MicrosoftViva’s current state & offerings and what they mean to your #digitalworkspace right now.

http://ow.ly/3QFK50Gnx9f

It's the final countdown! Join @EricOverfield at 11am PST to learn about common pitfalls and paths to success when moving to #SharePointOnline. You'll walk away with practical tips to use in your organization today!

http://ow.ly/fdf150GjyJT

In today's episode of the #PixelMillWebinars, you'll learn from the experience of a global organization’s path to digital teamwork victory and get to see first-hand how to successfully plan a smooth migration for your team.

Join us at 11am PST!

https://pixelmill.com/webinar-9-takeaways-from-a-global-organizations-migration-to-sharepoint-online/

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch