Visual design is what we are all waiting for as designers, but it’s important to take into account all the hard work we have done in the design process up to this point. Research, wireframes, moodboards, competitive sets, etc… all go into this first portion of the visual design process.

Remember to Subscribe https://goo.gl/6vCw64

I know I always get so excited and want rush straight to making full-fledged mockups as soon as the discovery phase is over… but be smart, don’t rush, take your time.

That’s why I have broken the visual design process down to 2 parts in my design process, that’s also why you might have been thinking my moodboards were a bit “loosey-goosey”. I have waited patiently while doing all the discovery work for this moment where instead of creating high-res mockups, I create Style-Tiles for the project.

I didn’t create the style tile process, just adopted it from these smart people.

http://styletil.es/

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. An interior designer doesn't design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

Style tiles are for when a mood board is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining the layout. They work well for clients who have established brands and need them to translate smoothly to the web. Whereas the word “mood” is often associated with brand and identity design, the word “style” was chosen to mirror “cascading stylesheets” and reinforce that Style Tiles are specific to Web design.

1. Intro - https://youtu.be/sr6jDeAoXCc
2. Discovery - https://youtu.be/g2aSWqU0gqA
3. Wireframe & Moodboard - https://youtu.be/boF058Bh5lo
4. Visual Design Part 1 - https://youtu.be/3xWViyhRGd4
5. Visual Design Part 2 - https://youtu.be/HqykJljlN2A
6. Setting up the Dev environment - https://youtu.be/cXbRAdPXpRA
7. Coding the Nav and Header - https://youtu.be/Boc_IZNzlh4
8. Coding the brand and feature section - https://youtu.be/O4gqpgRvYJg
9. Coding the Offer Section - https://youtu.be/JsLeiFbi8RM
10. Coding the Download Section - https://youtu.be/jMkAeo2uGHk

------------------------------------------------------------------------------------

This series is all about the web design and development process from start to finish. I am going to be taking you through the entire creative process from sketching and wireframing to high res mockups and full development phase.

I have never done a series this large, and my hope is that you will grow as a designer and developer not because I am perfect but because you have allowed yourself to stumble and fail with me on the road to making something you can be proud of.

I made this series because I believe that by teaching it I will learn and grow from not only the experience of creating the project but getting feedback from you all.

------------------------------------------------------------------------------------

////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...
https://designchamps.io/hip

////////// Connect with me here
Instagram: https://www.instagram.com/imjesseshow
Twitter: http://twitter.com/imjesseshow
Anchor: https://anchor.fm/imjesseshow
Medium: https://medium.com/@imjesseshow

////////// Sign up for my Monthly Newsletter
http://jesseshowalter.com/newsletter

////////// Music is from Musicbed click below for a free trial
http://share.mscbd.fm/imjesseshow

////////// Equipment
https://www.amazon.com/shop/jesseshowaltertv