Phase 2: Design4 min read

The second phase of StickOutSocial’s universal process is Design. This phase is comparable to working one-on-one with an interior designer in your home. It involves choosing the right fonts and colors and it solidifies the aesthetic feel of your website while also organizing the hardware our developers need for the actual building of your site in the next phase – Development.

The styling options within this phase are endless. Not sure what you want? We get it. We’d then suggest putting together a mood board. Not unlike a Pinterest board and assembled like a collage, mood boards do a great job at identifying what excites you overall and what styles best represent your brand.

From there, we put together a web style guide. Style guides set the tone and consistency for the entire website and can be thought of as colorful blueprints which outline the use of specific elements and graphics. They disclose font usage and spacing, image usage, hover effects and animation, as well as universal header and footer designs. These guides allow you to carefully consider each design before having to make decisions on the website as a whole.

“Style guides are best at setting a level of consistency in our designs. They also make our design process much more simple and streamlined, we can drag and drop elements that we’ve already created to use in our visual designs. It’s nice not to have to recreate the same button fifteen times! Another use for style guides are that they set guidelines for other designers. If another designer needs to jump in on a project they will know how to style every element to keep consistency. Lastly, style guides provide our clients a chance to consider each element of their website individually rather than the design as a whole, which is much less overwhelming. This allows us to explain why we chose to present each element the way we did.” – Brian Dixon, StickOutSocial Graphic and Web Designer

After we have an approved style guide as a roadmap, our designers create mobile and desktop visual designs. These mockupsare the resulting page designs after merging the architecture of a wireframe and the aesthetics of a web style guide from earlier phases. It’s important to have both mobile and desktop visual designs because they signify the differences in design between display sizes. Separating mobile designs allows us to provide a great user experience on all devices. Mobile designs will lay out how the mobile menu will function, any change to content displayed and how interactive elements on desktop will be handled on the limited real estate (and generally slower load speeds) available on mobile.

After these deliverables are approved by you, our designers and developers can move into Development. At this point, we have a complete understanding of what is being built – the Discovery phase tells us how the users will interact with the site and their intended user flows and the Design phase provides us with the blueprints to do so. Because of this, the development process flows quickly and easily.