How to design a website from wireframes
Vložit
- čas přidán 13. 08. 2016
- How to design a web site for a client? How do you go from wireframes to visual design? UX/UI design for Ole's Hakai Pass Salmon Fishing Lodge site. Watch how Chris Do provides feedback and art direction to designer Sharleen Chen while working on a client site.
We look at a real and ongoing project with client Ole's Hakai Pass and share an in-depth review of work done over the course of several weeks.
01:15 Sharleen Chen MFA, Cal Arts Candidate
02:45 Wireframes
05:39 Translating wireframes into visual design
09:00 Second pass after getting feedback
17:30 Before and After (adjusting lighting & style)
View Sharleen Chen's site here:
www.sharleenchen.com
Tools used:
Adobe Illustrator
Adobe Photoshop
InVision (site mockup)
_
HOW TO SUPPORT THE SKOOL:
Purchase a CORE Kit: theskool.co/collections/all
Support The Skool by making purchases using our Amazon Affiliate Link:
astore.amazon.com/chrisdo-20
Buy useful design tools from Creative Market:
creativemarket.com/?u=ChrisDo
Get your business cards printed at Moo:
www.moo.com/share/qn6x98
Special Thanks to our Sponsors:
www.pond5.com/skool2016
_
Connect with Skool Live online:
Visit The Skool WEBSITE: theskoolrocks.com
Like The Skool on FACEBOOK: bit.ly/TheSkoolFacebook
Follow The Skool on TWITTER:bit.ly/TheSkoolTwitter
Need brand strategy help?
Visit Blind LA’s WEBSITE: blind.com
Chris Do: / thechrisdo
/ bizofdesign (for FB live and event announcements).
Jose Caballer: / josecaballer
The PROCESS
Credits:
Executive Producer- Chris Do
Hosts- Chris Do
Director- Aaron Szekely
Cameraman- Aaron Szekely, Andrew Truong
Producer- Aaron Szekely
Editor- Aaron Szekely
Show Open- designed by William VanSkaik, animated by Bara Kwon
Musical Director- Adam Sanborne
===
*By making a purchase through any of our affiliate links, we receive a very small commission at no extra cost to you. This helps us on our mission to provide quality education to you. Thank you.
I totally want more of this.
Thanks for sharing.
Making them as fast as we can.
100 books and 1000s hrs of theory, dont come even close to what you can learn in a session like this.
Thanks for sharing 😊
Thank you Edwin
I think the most important part of being an artist or designer is bringing yourself to that higher level. You don't go with what you just made, you take a step back and reflect on your work, you converse about it, critique it, and find ways to do it better and be better. In doing so you will see the improvements reflected in all your other skills too. I think this is what Chris Do is exactly showing us.
When looking at these videos from the thumbnail, I always think, "Damn, 30 minutes? I don't know..." But by the time it's over, I have no regrets of watching. Really enjoyed this video, I would personally like to see more like it. It reminds me of graphic design at secondary school which was why I chose to study Graphic Design in the first place. From watching this, it is clear to me that Chris Do is a good design leader, taking time out to actually talk to staff, and really work through solutions. This good design leadership is something that I feel is absent from my University, and if anything has knocked my confidence as a designer because of less than constructive criticism. This channel shows that collaboration works in design, and if anything I need to reach out to good design leaders in order to improve. Thanks for the videos, keep it up.
i strive to be a good leader and not a boss. my role is to help the design team get to solutions and to see them grow. that gives me pleasure. being a jerk just to be tough and cool doesn't serve any purpose.
There are 30mns videos that just stink, and 30mns videos that are just great and both team provided videos that I can actually watch, plus enjoy. Thank you!
Fantastic attitude.
Love the process and the feedback session. Thanks Chris and Sharleen for this. I really like how calm and patient both of you were and how there was ample time to explore options.
More of this type of videos, please! This type of tutoring and going through the whole process - wireframes, ideas exploration, feedback, iterations and rationales behind every detail, everything with such a talented designers and a powerful leader - that’s something you cannot get anywhere else in the online world. So thankful for these videos - they teach and calm at the same time. Keep it coming, you’re the best! 💪
What I really enjoy about this is, as a "lone wolf" kind of guy, you quickly see the value of feedback and constructive criticism. Put together the right size team, and spend the time reviewing everyones piece, priceless. We learn to put away artistic weakness and the value of clear opinions from others. Chris, does a great job at this. Makes you want to send off your work for his criticism and get the feedback to apply to your efforts. Edited to add: I had to pause the video and go out and surf the site. Absolutely incredible. Adding to the fact that I'm viewing this on my 48" screen. Sent a link to my best buddy and we are heading to Ole's in the not so distant future.
Amazing work to you all. The site manages to do justice to the experience which anyone would admit is a challenge. I could smell the air and feel it. Result? Conversions. I don't want to go. I HAVE to go. Brilliant.
I love how Chris analyzes every inch of detail in it. It just shows that he wants the best out of the output.
This is such a great video. Seeing how Chris works through the which elements are working and which are not with the designer is so insightful! So often we only get to see finished products, this is really helpful. The designer looks like she did a really good job but Chris' expertise and mentoring helped to really elevate it to the next level. Well done!
Love the work through, Have watched a couple of times now - shaping up really well - glad to have Blind, Chris Do, Sharleen Chen and the others working alongside working on Ole's site redevelopment
Thank you Joan. I hope the site will be well received by the public.
As I commented, the site looks way way better than the original. Just wished you've also thought of search engine optimization (marketing). Great job guys!
I've watched some of your videos and they were instructional except for one thing - Quality. The team provided you with a high quality website design - You just need to complement the great design, with great quality videos.
I really like the way you guys work !
great space for designers to enjoy & try new ideas.
Not that Death Race & just finish any usable ver. with no time to study or try new ideas and some time even skipping the UX process.
Awesome Job guys I really enjoy that kind of realistic walk through footage, not just a 5min of How-To stuff without any realistic or applicable process.
Stay great guys waiting for more...
Freakin' awesome! I like how you use 'real world' projects to teach... many times we get fictitious companies with incomplete content translating to incomplete learning.Thank you my good Sir...and Madame!
This is great content! I am totally enthralled by the on-the-spot feedback and going through each phase.
Wow, Chris! You have restored my faith in art direction. I was so nervous for her but this was such a great crit with useful feedback and suggestions. Thank you for sharing this. I'd love to see more clips of your design critiques!
Sarah Lemke hi Sarah. We have a few more on art direction on the channel. But I need to make more.
Great content, and cool to see the interplay between wireframes > creative direction > creative execution > critiques.
One thing I'd like to see is the interaction and planning involved in taking this finalized design to the developers, and show how they evaluate their possible execution / build, and whether there's any give-and-take / concessions to be made in the design to allow for the back end build-out.
Awesome, so much going into the design the understanding the small details goes a long way, love it, I would love to see more of this raw revisions and ideas.
Loved this... been waiting to see the next step in this project. Good to see the 'not-perfect' middle designs and how to push them to the next levels. Thanks.
Design is iterative and it takes a while to draw out the design. The trick is to be able to pinpoint the parts that aren't working and to make corrections along the way. That is what an experienced art director can do.
Beautiful! Excellent work with designs that truly captured the mood and the overall feel of the place. Thank you so much. Please feature more videos like this.
we will try Karina.
Your two Ole's videos are by far my two favorites from SKOOL.
Thanks Travis. One day you will have to come with us.
Learnt Lots! currently, a stay-home-mum, pursuing a career in web & UI design. I religiously watch and take notes ... you're a great mentor to have! keeps me going when I doubt myself!
thanks Caroline.
I absolutely love these "How to design" videos. Keep em coming Chris!
will do. more coming.
Still super useful and relevant! - please make more of these videos following your design process from UX research to finished product! Very enjoyable and instructive.
The exact moment I saw you sketching, ideas started rushing through my mind on different ways to create a solution to the "check availability" issue. Thanks for the awesome vid and new inspiration
Glad that we inspired you.
Really love these kinds of videos. That photoshop lighting tip is so helpful. Please make more content like this. Love TheFutur.
Thank you! I can't tell you how hard it has been to find a video, article, SOMETHING, that dives into the details of visual web DESIGN not just coding. It's like people think websites just design themselves and the only important bit is the code.
Please do more like this! Cheers!
I totally get what you're trying to say man. Totally get it.
Please please please upload more video seasons like this one of him speaking his mind about the projects I enjoyed and was great to see it through the eyes of a pro. I learnt stuff
it was so cool to see how all that work came to real life, it actually inspires other to do the same.....all that effort really pays off.
Make more of this, as an aspiring front-end developer. I love to look at the process and the workflow of interface design like this. Love your channel a lot.
Sulaiman Noh thanks! Will do.
Thank you for putting so much time and effort in planning and making these videos! They help mr so much as a beginning Web Developer. I appreciate it a lot! And yes, I'd love to see more videos like these.
We are here for you.
There is something comforting & inspiring about watching someone else's process.
// Also, as a developer, I was sweating about the giant image situation just before you mentioned it.
Really enjoying the quality content on this channel!
Don't sweat Kait. We got this. :)
Glad to share our process.
Awesome video! Great to see how you guys go through your design processes.
Thanks Bentley.
Just subscribed today. You guys a re doing great work. Already have learned A LOT. Been binge watching your videos all day. And def would love more videos like this.
Thanks Zain. Glad to have you on board.
Real time feedback on designer's work- love it!
I really like the key points regarding the depth. After she fixed the edges on the photos and added the shadows everything started to feel much more organic. Also, I like how you asked if she warped/bent the shadow because anchoring it to an edge really reinforces the direction of light. Maybe even masking the shadow layers and painting out the edges so the shadows edge tapers off as well, thats just being nit-picky but I love the detail work.
Also great tip regarding the blurry background image. Warping it and creating some perspective along with a field-blur effect really made the entire portion come to life.
Again, awesome content. Im working 10 hour days designing and coming home to watch videos like these just to continue some inner dialogue on the topic. Cheers!
What I find amazing is, you guys were doing this workflow in 2016. Now I know why so many sites never see a R.O.I.
This was awesome! I really love videos where Chris is showing art direction and his approach when it comes to giving art direction to designers. I'm am an aspiring art director, but I don't have much access to someone who is doing it day-to-day in the business. This video along with the "Typography & Art Direction" video were very eye opening to me. MORE OF THESE PLEASE!!!! Thanks Chris Do and The Skool for sharing!
Rathanak. Thanks for the feedback and encouragement. I'll make more.
Oh one other suggestion . . . if you do another art direction piece can it on a motion design piece? And possibly have another art director do the video to show different techniques from a different person? Just a thought. Thanks!
I think Matt or Greg will tackle this. Check out Matt's latest tutorial on how to achieve the double exposure look. It's great.
This was great. Seeing the iterations and collaboration is something I would love to see more of. I think it would be great as well to throw in the process of UX before the the actual design. Of course two videos. Keep them coming love this channel!
We did the UX design episode way back with Jose running it. It's already up if you want to check that out.
Yeah will do. Keep up the amazing videos
Loved the work, the process of making it, and the video. It is so informative and entertaining. Keep it up guys.
Thanks Ebi. I appreciate your encouragement.
First off thank you so much for such a detailed video!! Usually people will post about ux/web design but they don't show actual client projects so its hard to understand somethings. As for myself I am a photographer trying to transition into the design field. I am unsure of if I should study visual design or more ux - I lack drawing skills unfortunately. I have designed a few websites but they look pretty cold and corporate. However I do like the thinking behind the projects and making wireframes ect. Thanks for any input!
I think i will try this for refreshing my work, adapting alot of photoshop images might make your website heavier than creative with the interaction with basic of content/images, but sometimes its a good way to try out.
Very helpful, thanks chris.
I'm back lol! This was dope! She did an amazing job. 12:30 was perfect! Definitely show more vids like this!
Thanks for sharing the thought process behind the work. Always interesting.
glad you are enjoying this format.
The way you revise and comment to designer are brilliant!! Big fan of you now :)
Thanks Phung.
Man you guys manage to make me feel massively Inspired and under skilled all at the same time! haha
Keep up the good work I’m official hooked (also would love to see more UI/UX/Web!)
Focus on the inspired part.
This is so useful. The Skool is my new favorite channel.
Clap clap.
LOVE this video! I've learned so much. This is a designer's dream work environment. Keep up the good work!
thanks Sara.
My takeaway from this video? "Design is an iterative process". Awesome to watch the process in action in the hands of a capable agency. In-house design, in my experience, can lack this sort of rigorous back and forth collaboration, in exchange for down-&-dirty, get-it-out-the-door-yesterday designs. This video is another great resource for my students. Looking forward to more.
Great summary David. Please share with your students. Let us know if we can help in your dialogue with them.
This was a really great show. I love to see the iterations on how a design comes to life.
Thanks Jay.
Thank you very much for this video. I've learnt so much from it. This is what I recognise as VALUABLE content, not some things that you pulled off Google and put photos in and made a video out of it.
Very cool seeing the growth and iteration of this project.
Johnzilla87 thanks. It's almost done.
I thoroughly enjoyed this video. Cheers, Chris.
Lucifer thank you.
I'm not a web developer but this was very fun and informative to watch, cause i could apply the principle in the critics you gave into basically all the designs i do. E.g. When you point out the elements that could make the photos pop. (it's just really small things that made a huge difference) and it made me realize that as a designer you really have to just pay close attention to what you're doing. :-) awesome stuff! As always. Keep em' coming...
Basic design principles can be applied to almost anything. The fundamentals are so important to learn.
MORE! I DEFINITELY want to see more!!
Such a great video! Love seeing the process...yes, more plz!
Guys, really another amazing video. As a self taught guy, who almost never worked with an Art Director or a business planner stuff like that, your channel has helped me grow a lot. Thx guys, keep it up!
Thanks Deks. Happy to share.
Do you plan on sharing more of those stuff Web, App design etc?
+Denislav “Deks” Jeliazkov yes. We will share whatever we are doing.
Top 5 favorite channels on CZcams for sure. So much information!
Also, that intern is very talented!
We have the best interns Brian. They are rock stars. Thanks. Keep watching to see what happens.
Chris Do excellent job! That make me think more about space and how each object interact with each other, thanks a lot!
Eric Andrade next video in this series drops later this week. Stay tuned.
4 sure, right now I'm focusing on Haskell (n_n). I'm dev but always multitasking on other areas :D
Sometimes I'm not 100% sure if I want to be a desigmer or a fighter for justice (like a cop or smth but im from switzerland) and then I follow you guy's conversations and it inspires me so much and brings me back on the path of becoming a designer! Thank you so much please feel appreciated!
you can be a designer and fight for justice with creating pieces of art that changes people.
The Futur That coming out of your mouth inspired me, thanks Chris!
You're very welcome.
Already seen lots of your videos and love the way you work with designers to help them to make perfect outcome. Learning much from you. Thank you!
Thank you
Dominika where are you watching us from?
+The Skool Network Czech republic :)
Awesome. Thanks for watching. I was lecturing a few months back in Bratislava, Slovakia.
Really? Are u planning on trip to czech with any lecture?
I'm so glad to have discovered this page! Invaluable information. Thank you!
glad you found us.
wow, great job team!I adore Your critics and explanations, very valuable. And thanks for the final product and comparison. MORE!
Thanks. plenty more coming. we have over 170 videos.
great! cause I've watced all Your videos in 3 days and can't find anything like that..I know..addict.. :D
Vita Janceviciene no 12 step needed.
not sure.. however, don't wait till Xmas, please :)
We want more of this Content ,You're great Chris.. One of the best channel to learn!!
Thank you Vinayak. I want more subscribers so we will give the people what they want. I have this goal that when we hit X number of subscribers that a reality program around a design studio (like Project Runway or Flipped Out) is possible.
+The Skool Network That Will Be Great!!
This was great. l love how you work through problems and think out loud so l can follow the design evolution.
Doing my best Cheryl.
Really amazing direction on the designer. I really love how you hit the spot with every problem that needs to be fixed.
"This is not working because of this, this and this."
I would love to work with a guy like you!
Thanks Luciano. It's taken many years of practice and study to get me to this level where I can spot the problem really quickly. Where are you from?
We are hoping to travel the world and provide this level of critique to students everywhere.
I'm from Argentina.
When I was at design school some teachers just said "this is not the right direction, you need to explore more" just that. Most times you just had to be lucky enough to hit the nail and then just iterate from that.
That would be kind of frustrating. The job of the teacher is to help share their lens with you.
Totally agree.
I learned more looking on the web for people like you, and I was lucky enough to find an awesome mentor to keep learning.
Amazing channel by the way!
Absolutely fabulous video! It taught me so much. Thank you!
This is awesome.!!! Hard to find stuff like this, glad I found it :) Please make more of this kind...
Sure thing. Seems like people enjoy these videos so we'll be making more for sure.
Thanks Chris, The Skool, very professional.
Thank you.
Great video, definitely want to see more videos like this one
Some really high quality material right there, thx guys! Waiting for more of the same.
More on its way Lighto.
@23:48 loudest swallow ever in a CZcams video :)
But seriously, this is amazing quality. Learning so much from your videos, Chris. Thank you so much.
gulp.
Definitely like to see more of this!
agreed, please share more, i feel like what I learned in 30mins would've taken me 2 hours in class to learn, thank you
we just saved you 1.5 hours.
Nice hat Chris and great content like always. Thanks!
Thanks Chris. I've got a bunch of caps I will be wearing for the show.
I've been practicing the things you teach for a few months now. There was a bunch of hurdles along the way but I've finally reach the next level of trust and respect with one of my clients. This video couldn't come at a better timing. Knowing I have little experience with designing a website they've fired their web developer, asked me to design a website, separate landing page and hired a guy that will do all the coding work for me. I wanted to thank you for helping me get here!! You've taught us to always double up your price with new clients. What about the same clients that are giving you new and bigger projects?
Congrats.
How did it go my friend?!
best web design I've seen so far, yes Chris we wanna see more, we hungry!!
Gradinariu Nicu Bogdan ok. Thanks.
Great informative video. She did a great job and I love watching Chris's art direction in action - rhyme intended ;)
thanks. you got to work on that rhyme game. ; )
The Futur
Very much so:))
I'm learning a lot! Thanks Chris. Thanks Blind!
You're very welcome Beaux.
Awesome video.. l'm learning so much!! of course I want to see more videos like this guys congrats!
Thanks Regina.
I totally enjoyed this! Share more of these...
Excellent video guys. Really loved it. Learnt so much!
Thanks!
Thanks Robert. You're welcome.
id love to see how the web desingers/developers part to this project also...its good insight seeing the development stages and how things are put into perspective in regards to typography, white space, images, depth, layout, etc... very insightful on how you suggest things... good video.
filming development update on Tuesday when we get back into the office Kenny.
great! I loved watching this whole series! so interesting and helpful!
Louise Bova site laughing this week. Testing right now.
More of this, please please. Thanks very much.
I love this "pure" type of content - would love to see more of the actual branding you do!
Hi Ted. We can do that. Saw you on the Gary Vee show. Nicely done. How's your business going?
Haha thanks. Business is going really well, I'm starting to gain more exposure and the response I've had from opening up has been great. I've put into action both what you and Gary have said and I've used my age as an advantage to make myself "different" and to help tell my story. Clients seem to be flooding through ;)
+Ted Bettridge that's great to hear. You've got to just embrace who you are and what makes you unique. Out of curiosity, were you getting a second opinion or just more exposure?
The Skool Network 100%! So after the video you made that gave me the confidence to just go all out and embrace who I am. And I thank you for that. I asked Gary about how I should go around presenting myself on social media in the position I am etc. and was interested to get Gary's point of view with his sugar-coating style.
+Ted Bettridge excellent.
your videos are really educating.. thanks for this
i'm from Sri Lanka where we don't get much education in the design side. I'v been in the business of design for about 6 years now and been struggling to define small things in design. Why does not some element wont be in harmony with another, where Chris Do explains it really well. Keep on doing design reviews. Guys like me who is from the other side of the world really learns a lot and so does my colleagues at work. Thanx so much for this.
Hi Marlin. Glad you find the videos to be helpful all the way from Sri Lanka.
Yeah so true.
Great inspiration , for a self-taught student this kind of videos are perfect , thanks !!!
Thanks Luigi!
The Skool Network Your welcome , Love your channel
That's what call timeless education. thumbs up!
Great content. Please share more of this.
More like this please :) Great stuff as per usual. Would also like to see the time lapse video you mentioned.
I'm going to have to bug some of the designers for this.
Really Great !!!! Inspire me a lot !!! Love it !
Absolutely loved it, agree with all top comments! Want much more of this please! And thank you!
Loved it. I would like to see the feedback and changes from the developers perspective.
Most useful - truly a PROCESS to watch :)
thanks. hence the name. we are sharing the process.
Love to see more of this. Great work!
Sanne Augustynen thank you.
Super insightful! Thanks as always
Thanks Lantlos.
You guys are aware of what this means for many people? (At least in my country).
I know, this is a bit exaggerated but you guys are teaching things that are not taught on majority universities or design schools.
The level of professionalism, the eye to detail, the user/human centric design... everything I just love it!
I really appreciate it the hard work are you doing. Thanks!
That's why we do it Ivan. What country are you from? Tell me more about your story.
I'm from México. I work as an "unicorn" on a 360 Agency, so I do research, design and web development.
My struggle is with the design universities here, that they are not good enough teaching how to properly design. They are just teaching how using adobe's software, and not how to solving problems. Yeah, they teach some theory and no doubt many of the teachers are good, but I think the real problem I see (at least with my coworkers) is that only focus on the product or design look "pretty". (and that is very relative).
It is very rare occasion when they make a market study, or user research, etc...
I'm a very self learning person, so, I try to teach my coworkers how to make a good interface design, or "the because of things", how the brain works when interacting with an interface, etc. To this adding the "ego" factor is really frustrating.
Seeing this videos and the work you are doing, is helping me a lot to teach my teammates the "doing right" for this type of business. You take out of my head the exact words mean when these problems come.
Again, thanks for these series of videos, the channel in general. And much respect from me.
(Sorry for the bad english)
+Iván Uruchurtu (Vheissu) thanks for sharing. In the last couple of years I've learned a whole different way of designing that begins with understanding what the user needs.
Love it! Great insights!
Love this one! Please more like this!
Really dig the final designs. Inspires lots of ideas.
Mutualist did you visit the site?
Yeah. The site is great. I think Sharleen really nailed the 'refined rustic' aesthetic and I really like the typographic treatments for each of the sub-sections. Seeing the process of iteration reminds me of my days as a front end web designer, I used the same process. Letting us see how the design evolved was fantastic. Chris' creative direction and respectful suggestions and critique demonstrate the kind of personality that every creative looks for in a boss. The only thing I would have liked to see with the final site is a parallax scrolling feature integrated into the development.