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 SharmaKunaal Sharma
Senior UI/UX Designer
Batman Junkie
Your Composition Confidant

Leave a Reply

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

Human Check *

Filed Under

39 days to go until Microsoft Ignite. Visit https://t.co/dGSgptk8kP for a live countdown. #MSIgnite https://t.co/gWWpHrkAPa

#TypeScript & the #SPFx are more than just the definition of bff's. Come hear @ShrPntKnight tell their story on 8/2… https://t.co/VyUej1TQOT

Have you heard the one about #TypeScript? Come hear the rest of the story on Thursday 8/24 @ our next webinar!… https://t.co/5i5Qh2eJKe

Come hear about the new Business Intelligence Landscape at the next #EBSPUG meeting next Thursday, 8/24!… https://t.co/QtDBR91na1

Come one! Come all! #SharePoint Saturday Sacramento is returning October 21st! Sign up today!… https://t.co/7ioTheONsX