4 - Design & Code a Responsive Landing Page from Start to Finish | Visual Design Part 1 - StyleTile
ฝัง
- เผยแพร่เมื่อ 27 มี.ค. 2018
- 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 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.
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 - • 1 - Design & Code a Re...
2. Discovery - • 2 - Design & Code a Re...
3. Wireframe & Moodboard - • 3 - Design & Code a Re...
4. Visual Design Part 1 - • 4 - Design & Code a Re...
5. Visual Design Part 2 - • 5 - Design & Code a Re...
6. Setting up the Dev environment - • 6 - Design & Code a Re...
7. Coding the Nav and Header - • 7 - Design & Code a Re...
8. Coding the brand and feature section - • 8 - Design & Code a Re...
9. Coding the Offer Section - • 9 - Design & Code a Re...
10. Coding the Download Section - • 10 - Design & Code a R...
------------------------------------------------------------------------------------
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...
designchamps.io/hip
////////// Connect with me here 👍🏼
Instagram: / imjesseshow
Twitter: / imjesseshow
Anchor: anchor.fm/imjesseshow
Medium: / imjesseshow
////////// Sign up for my Monthly Newsletter 📫
jesseshowalter.com/newsletter
////////// Music is from Musicbed click below for a free trial 👇🏼
share.mscbd.fm/imjesseshow
////////// Equipment 📸
www.amazon.com/shop/jesseshow...
Hey everyone, Thanks for following along with the process. We are diving into the meat of the series where I get more hands-on so stick with me as I create this style tile as part 1 of the visual design phase. Have you ever used a style tile? Do you find mood boards to vague? How does your workflow differ from mine? let me know below 👍
Jesse Showalter I have never heard of style tile until today, amazing series
Glad it’s helping 😎
Jesse Showalter Definitely trying this styletile in presentation, seem much cleaner and quicker than stylescapes
I wish to use style tile or mood boards. I think it save a lot of time and also keep everything clean. You can come back in each moment to this board and make sure what was the colour you choose or how big should be H1 paragraph. The problem is for my client it isn't enough. They can't imagine how all this elements will look together on the page. So I develop and develop and for the end I have ready landing page. Everything will be fine, because now client can see how the page will look like and then he know he do not want page look like this. And it happens all the time! Instead one landing page I design five and then maybe the last one is almost fine.
The best series for web designers on YT. !!!!
Wow thanks!!! What a humbling comment 🙈
Dude, you're amazing. I thought this was going to be just designing and coding. Not a whole project workflow! Very useful.
For the people out there wanting to start as a designer / front-end developer: Jesse's workflow is a very good way to go. Most of the companies have the same workflow and use the same programs.
Thanks for the encouragement. I'm glad you got some value out of the series
Seriously Jesse, you are helping so many people. When I finally make it, I definitely will give back. Thank you so much.
Saying thank you to the icon designers was both respectful and hilarious
Credit where credit is due 👍🏼
Awesome series. Old but gold. I wish you could do a 2021 version! Thanks, Jesse!
Goodness gracious this is valuable. So glad I found your channel!
Wow thanks. Let me know what topics I can cover for you 👍🏼
Me too!!
Always interesting to see other workflow process, especially when their strengths lie in different areas. Keep them coming.
More coming soon
Even tough I am not new to the design process, I really appreciate, that you just present your way of working. You make relatively quick, yet thoughtful decisions. Thank you.
Thanks for the encouragement.
I found this late, but HEY! Great content will always be great content. Thanks man. I really love your channel
Thank you so much, Ahmed!! 🤙
This was super helpful!!! Thank you so much! I understand style guides so much more! :)
Jesse, your content is so much better than other (paid) courses I found, are you thinking about doing a UX review from projects/portafolio from your subscribers? Just a suggestion, I´ve seen it in dropshipping channels and I´d love to see it to understand "your process" as you say :) Thanks a lot and have a wonderful 2020!
I’m just about to launch memberships where my members get access to submit their portfolios and work for review and rework and other series
Great series! Can't wait for more!
More coming each week
I've been waiting. Finally
This Series Is "THE BEST". So Much Of Learnings And Resources. You Deserve Many More Subscribers Than 30k. (And Hoping That You Will Get It Soon).Keep Up The Good Work.
Thanks, I really appreciate the encouragement.
this series are brilliant! thanks you so much for sharing this with us!
You’re so welcome
AMAZING SIR !!!!!!!.....You are the man!
You are amazing inspirational teacher!! Keep up the good work!
Wow thanks for the kind words. More content coming each week so make sure to hit the bell 🔥
Really enjoying your stuff, man! Thanks for taking the time.
Thank you for taking the time to watch, let me know what topics you would like to see covered 👍🏼
So impressive. Best web tutorials ever seen.
Wow thanks so much!!!
This is so helpful. Even though I know some of this, I paid to learn in college and it’s so amazing you are sharing this knowledge. I am watching thank you!
Very nice process didnt know about it.. Thanks!
👍🏼
Amazing process! Is helping me a lot to build my own way to project UI interfaces
Awesome 🤘🏻
Hello! learning a lot on this series so thank you! and is there a difference between style tiles and style guides?
I never knew that about the golden ratio, multiplying font size by 1.6. You get a like and subscribe my name friend :P
Glad you learned something new, I always love that feeling
very nice and helpful
You look like don jon. Regardless, youre helping me out man i got my exam about this in 2days
Haha, thanks for the support and have a good day!
Awesome series! I subscribed.
Thanks for the support 👍🏼👍🏼👍🏼
Nice workflow.. :)
Thanks 👍🏼
Sick new intro 😊
Thanks 👍🏼
I know this porcess as UI kit :)
love your video's!
Love your logo 👍🏼
Jesse Showalter oh, thanks. Designed it myself! Pretty happy how it turned out
Hi Jesse, this is Blas from Argentina. Thanks for sharing, your content is amazing. Let me ask you something about typography: Does it changes its size when you jump to the mobile version? I mean, do you keep each typography size or change it when you adapt the design to mobile resolution? Thanks again!
Really nice video here. I love it, just wanted to know if I can also use figma for this and flow with this video.
Sure can, Figma is pretty sweet. This series is not "design tool" specific.
I like how you have your new tab dashboard set up in Chrome! Is that a plugin?
Yes Muzli
I was wondering where you get the numbers to multiply with the golden ratio, are you just kind of picking numbers?
Choose a base font size and then start working that golden ratio up
JESSE, is Style Guide same as Design System?
Not the same. Great topic for a video though 👍🏼
That's great. I've been going through design blogs and they keep mentioning it. It feels really much like what you explained here. I'm learning a lot from you about design techniques and responsibilities. Thank you so much. When I design something, I'll show you. By the way, Invision is coming with a desktop app. It is available for MAC now. Have you heard about it?
Hey Jesse, I was wondering where you got the logo's from? Are they free or copyrighted? OR better question to ask is where can you go to find logo's to brands such as Nike/Apple/Samsung/Netflix etc.? - Can you talk about it in a video please? Thanks in advance :)
Oh and another fab video! I'm excited to watch the rest of this series! ^_^
Thanks so much for the encouragement. When it comes to logos you can usually find large brands logos easily online. As far as copyright as long as you don;t use them against their brand guidelines or claim them as your own you should be ok
Your welcome 😊 And thanks so much for the reply!
Yo! You need to make tutorials with non-mandatory donations! I'd give!
Thanks so much, you can always support me by sharing the video 👍🏼
Color “palette” though - otherwise great video!
I am atrocious at spelling and grammar, I’ll try harder 😂
nice please include also page transition here is plugin barbajs.org ????????????
I think this might be a little outside the scope of my initial plan for this series but I will put it on the list for later.
Is that a Tattoo on your head? 😂
Yes it is, I’m dedicated to art 😂😂😂