100 comments

  • J Panda

    Great Vid Chris!!! Love It! Also Yes to the Drop Shadow Tut

    Reply
  • D •

    all of your employees are koreans?

    Reply
  • Duran Diesel

    Great content as always.

    Reply
  • Paul Karl-Alarcon

    yes, drop shadow tutorial please.

    Reply
  • Calvin Ng

    Do you think Bootstrap works better than 960?

    Reply
  • Program25

    I would want to learn how to do the 3D drop shadows!!

    Reply
  • David Hager

    The way the pixel itself works is:
    You have css pixels which are what you're referring to when you say 960 pixels wide
    And you have the device pixels, which are the literal pixels the device has.

    css pixels can be shown as a ratio of device pixels, so say my normal sized android phone will render it's 1080 device pixels as 360 css pixels. The reason for this is if the device pixels were at a 1:1 ratio where 1080 device pixels was still 1080 css pixels, that would be super wide for a phone in portrait and it would be showing lots of info on that tiny screen.
    So your phone says, ok, my device is 1080 pixels wide, but lets make every 3 pixels 1 pixel. so you now have a screen that is 360 css pixels. This was your phone is showing way less info rather than if it were really 1080 pixels wide.

    Image turning the phone sideways to landscape which would make it 1920 pixels wide. That's the same width as my desktop, imagine viewing everything the same size as your desktop on a little 5 inch screen sideways. It would all be way too small and you wouldn't be able to read anything.

    Here's a great site with a lot of device and css width ratios so you can see how different things have different ratios. http://mydevice.io/devices/
    And here you can see your device widthhttp://mydevice.io/devices/
    Desktops mostly have ratios of 1:1 because they were the thing to design for when css was being made, so no ratios to fit the pixels were needed.

    Reply
  • Maece Seirafi

    I think the art direction videos are a great way to get a glimpse into the raw stages of the project, how things can go on the designers side and the developer's side. I remember one video you had focused on giving art direction for editorial design so its nice to see another medium of art direction and would love to see more. Keep it up!

    Reply
  • Alex Bass

    Enjoying watching this project come to life. Interesting to hear that you use an off-premise dev team. Makes sense, you're more of the design shop and you work with a dev shop then? Very interesting! Watching the previous designs, I cringed (as a developer) at how much work making that design work on mobile would be on the pages that had no breaks in it. Was really looking forward to seeing how you guys would deal with it! I guess we'll have to wait for the next video!

    Reply
  • Aaron Silber

    If you stop thinking in terms of pixels and start thinking in terms of 'em' units this will become much easier for you.

    Reply
  • Calvin Ng

    14pt is the ideal font size for eligibility. Just sharing… 🙂

    Reply
  • Riley Jones

    I really enjoy watching the decisions talked about throughout this step of the process. I also appreciated your mention for designing by mobile-first; the design really benefits when the mobile foundations are defined initially.

    I would love for someone to argue against it, but isn't designing to the 960-grid a little outdated when screen sizes are in such a variety? What do you guys think?

    Also. You guys should check out Webflow. It is totally re-defining my web-design process.

    All in all. Awesome work. Keep up the great content!

    Reply
  • ashok chavada

    I've never been to any design school to learn design because there are some good channels on YouTube for us that keeps telling us that don't go to any school because TheSkoolNetwork is on YouTube. Than you very much sir for this kind of information.

    Reply
  • ashok chavada

    Yes for that drop shadow video.

    Reply
  • Muhammad Saad Masroor

    Great stuff as always 💎

    Reply
  • Syed _

    A big Yes to the shadow tutorial! please.

    Reply
  • massivekitty

    Drop shadow tut please!

    Reply
  • Daniel Rad

    Personally I wouldn't care for such a basic tutorial. There are a million and one tutorials out there for adding drop shadows, you'd be wasting your time. Plus surely a massive segment of your audience already knows basic PS skills, in a way you'd be negatively effecting their perception of the quality of your content.

    Reply
  • BALTSAR

    I got a question for the designer: Why don't you guys design in Sketch and why? How come you guys use illustrator? Out of curiosity.

    Reply
  • Rajen Kaji Shrestha

    Loved the vid, want more web based stuff like this and please do the shadow tut Chris

    Reply
  • Victor Flores

    First of, I would like to thank you for the process. I've learned a lot from those videos, and I believe you're teaching something that a lot of people do not have a lot of understanding which is the designer/digital business. There is so much more value in those videos than this one.

    That said, I don't think you guys should focus on showing introductory web design techniques. I don't think you are taking care of the audience you have grown with the previous videos in the process.

    As a front-end developer with UX/UI design experience, I think this video tried explaining something that both the designers don't have a strong core understanding of.

    Also from a development perceptive, there are solutions to making your design work the way you want it to regardless of the screen size.

    Reply
  • Elvis Benício

    Why not SketchApp?

    Reply
  • Michael Thomas

    Thanks for the candid peep show 🙂

    Reply
  • Noel

    Mobile first approach…its 2016? The design process example feels very 2010 (desktop to mobile). Also why 960px? 1170/1200px is pretty much the current standard…just saying!

    Reply
  • Dominik Korolczuk

    insded of using the 960grid get familiar with bootstrap and maybe give your designers a basic bootcamp in how a site is developed and build. I work at an IT company as a designer so I know your pain of having to hold back fancy design sometimes in favour of usability XD

    Reply
  • Raden Yunos

    What do you guys think of filtering clients through a questionnaire? Instead of having one message box at my site's contact page, there's a questionnaire. Sean McCabe of seanwes talks a lot about this when doing client work. Great show, loving the skool.

    Reply
  • Lion Development Support Team

    Great video Chris! I like the fact we can now see how you interact with your team – Cool Leader!

    Reply
  • Jimmy Design

    Great Video as always. Really goes to show how hard designing for different devices with display sizes.

    Reply
  • nodws

    On fancy backgrounds with lots of elements I separate them in PNG files and use multiple background CSS property 🙂 (or absolute positioned divs) that way you can control the crop

    Reply
  • Ikram Faidzal

    Chris/Huang, on (27:38) tips, if you are using Adobe Photoshop CC, you could use "Device Preview" to preview your design without having to email your jpeg. I called it "Live preview". Here's the link to understand more: https://helpx.adobe.com/photoshop/using/devicepreview.html

    Reply
  • Manny Donaire

    great video but please give other person speaking a microphone.

    Reply
  • Reggie Allen

    Hey great video, thank you! At some point could you explain the file structure being sent over to the developer to make the site work?

    Reply
  • Sergio Ribeiro

    Cris how do you balance (or justify) using large background images in relation to render speed and more importantly google's page speed insights? I find myself frequently sacrificing design for better SEO optimization and in making Google happy.

    Reply
  • Zero Wolf

    Was a good app to view your png for mobile besides emailing it to yourself? Awesome environment btw, lol towards the end was funny.

    Reply
  • Julius Da

    Hi, this is really helpful process. Thanks for sharing.
    I can't even imagine how many hours it takes to work on this kind of project
    and how many people are working on this.
    What's the budget of it?

    Reply
  • Kishan Pandav

    very helpful……definitely it will help us….
    and we can check designs by device preview (one of adobe facility) no need of jpeg or png.
    right?

    Reply
  • Eli S

    Love how you fixed the background problem on the fly. I'm guessing that comes with experience lol. And your designer was right there with you. You are surrounded by a ton of talent!

    Reply
  • Andrew Ahn

    I want to learn 3D Drop Shadows

    Reply
  • Sulaiman Noh

    Can u make a video on how to survive as a self-taught web designer or graphic designer?

    Reply
  • Nez D

    The Adobe Preview app is handy for live Photoshop link.

    Reply
  • evilMonkey

    I'm still waiting for the "Conversion of words into design." Or " how to translate words into design" .. I would loooove to see that one… 😀 great video by the way.. 😉 Cheers from Serbia 🙂

    Reply
  • Luciano Hernandez

    You could try Invision app to look at mockups and for feedback too.

    It's quite nice.

    Reply
  • Liam Rainford

    More walkthroughs please! These are a great inspiration! Thank you!

    Reply
  • Sharon van Retourtje Vos

    I love love love these design and proces walkthroughs! We can see the real behind the scene. And thanks for the tip to save a JPEG for mobile view, brilliant! I also want to say thanks for making and sharing these videos and all the work you put in. I follow you for a while now and we creatives can learn a lot from it. And I especially adore the combination of design and strategy, its the-best-combination-ever!

    Reply
  • KungFuChess

    You guys ever Use Macaw or Muse for responsive sites?

    Reply
  • Mark Gallardo

    Hey Chris, out of curiosity: are there any legal implications when you are sharing client work through social media?

    Reply
  • Shirish Maharjan

    Drop Shadows tutorial plz!!

    Reply
  • darko efremov

    You can see that link right there

    It's just a prank bro.

    Reply
  • EPHS

    Helpful video, especially when it comes to working at a 2x resolution for Retina, etc. However, I want to ask if one can also just simply work at a higher DPI, say 144dpi rather than doubling the size of elements. Essentially I can keep keep my fonts at their true size of say 15pt at 144dpi. Is this easier for those used to working in the past at 72dpi? Just curious. Also, would love to see the Drop Shadow tutorial too.

    Reply
  • Agustin Ruiz

    Do you guys always work on desktop design first? If so, why? I usually work with mobile first approach, but of course I have never made designs as good and complex as you do hahaha (developer trying to become a designer here).
    Great video! I love this kind of videos and thanks for the hot tip Sang!!!

    Reply
  • Luiz Soyer

    Google 1:1 grid or baseline grid for web. 960 is so dead. 960px grid limits you more than enables you to create great layouts with the use of white space. And your design(er) needs an update, the 1024 px is not the majority anymore. The new laptops (last 3 years or so) have a resolution of 1366×768 which gives you a weird aspect ratio, so you might consider start with 1200 px. But again, when you talk about responsive design px is not a very accurate way to design. It's better to use percentage for fluid. Or you do the adaptive grid with at least 6 break points to make sure your design will look good for majority of users.

    Reply
  • Eliot Nguyen

    I think this is where you have the market cornered, Chris: you're able to actually interact with your designers and we get to see design guidelines delivered with concrete examples to support the conversation and guidelines. It's not a conversation I get to experience, since most didactic you tubers interact only with themselves and while their knowledge is great, it lacks conflict and may often come across as too exclusive in its purposes. However, when we get to see you interacting with your students, designers, peers, and even clients there is the inherent value of the conversation having a solid, contextual basis. I like fake clients meant as mental exercise props but real clients with real world problems and an in depth analysis of those clients are soooooo dope and precious. Thanks for doing that.

    The interaction is worth its weight in gold. Chris, you're coming from a very experienced, tried and true perspective. When you interact with your designers, it is a familiar context other designers have, be it they're talking to the dope Chris Do or another person whose has a greater range of design senses. When Sang learns off the banter, the audience learns it tenfold. When sang speaks and has an idea, it's inspirational for us other designers who don't doubt the validity of our design choices but maybe are hesitant to want to voice the validity for constructive purposes. The lessons learned here are not polished and sent for copy right and that's what makes them a lot more tangible to those starting out.

    Since I know you want more feedback from the audience, I do want to lastly say that I like the trend of this channel because it's not just showing pretty stuff but the behind-the-scenes (maybe that could be a dope additional segment or a stand alone) where each creative stage is sequenced like a rocky training Montage. Hahah.

    Though I say little about how dope you are compared to the suggestion, the truest tone of this message is of appreciation for the wealth of good education you give back to the community.

    Reply
  • Julius Da

    Do you use invision for web projects?
    If not why?

    Reply
  • VipZip

    The designer in this case was not confident in the job he was doing. I don't know, he gave me a shy impression. The female designer that that you linked in this video on the other hand was more open and more confident.

    Reply
  • Plop Cristian

    why guys are not use sketch? or photoshop, there you can easily test on mobile.

    Reply
  • carlos morales

    Do you use the new adobe tools like XD or Sketch 4?

    Reply
  • Ralphunreal

    This is amazing, I would like more videos like this for web design and also it would be good to learn smaller details like spacing, pixel size for certain components and fonts,etc

    Reply
  • John Joshua Guerrero

    thank you very much for this sir chris

    Reply
  • Erik Peterson

    Thanks for your videos Chris. They are appreciated.

    Reply
  • Phung Viet Linh

    Your hot tip is really amazing!! Thanks a lot! Your video is very insightful and helpful!

    Reply
  • Jerald Johnson

    Hey Chris, why doesn't your developer use background cover on your section so you don't get the white on the edges?

    Reply
  • Nitai Lev Oren

    can you guys make an episode on grid, because I think I'm missing out on this, and this is an essential part of the design process.
    and I read a lot of books on this subject and I'm still not able to know how to use it. and a lot of designers that I know that learned on design school don't know how to use a grid.

    Reply
  • suhail qureshi

    Hey Chris, I really like your videos specially the videos where you discuss about the designs live.

    I have one question to ask regarding taking the canvas size before creating any website or mobile app. Few people suggest to take the 72 resolution for mobile apps in android and later take out assets on different sizes like- HDPI, XHDPI, XXHDPI and so on.

    So my question here is what exactly the resolution or canvas size a designer should take? Please help 🙂

    Cheers,
    Suhail

    Reply
  • Vatan Beqrama

    Hi Chris, about that hot tip , there is a app called Skala Preview (for Mac's) and allows you to see your responsive design in LIVE VIEW. Just save that mobile PSD file and Drag & Drop in Skala Preview and just like that it's in your Mobile Phone/Tablet.

    btw i like that entire design from Desktop to Responsive Design.

    Peace and pls make more videos like this with complex mobile design issues.

    Reply
  • Gursimran Singh

    Brilliant explanation , but I don't this is great idea to design the mobile version of website.Because if you see the mobile view at 10:02 minute of the video, this design is not going to view like this in browser.You have to take the consideration of frontend developer for making the mobile user experience.

    Reply
  • Muhammad Faizan Atiq

    When I do design II usually connect my phone using adobe preview app. In that way, I get live mockup of the live thing

    Reply
  • Vita Janceviciene

    don't need shadow dropping – it's easy to find, better TOTB ideas! 🙂 or more diificcult technical things. but if You do anyways, I definitely watch it, I know it's gonna be great :), so.. :))

    Reply
  • Vita Janceviciene

    yet, in my very startup point of view, "job opportunities" would seem more in the same style/ vibe if it had that old paper background.

    Reply
  • Stepan Lavrinenko

    6:26 The invisible link

    Reply
  • Stepan Lavrinenko

    Hi, Chris, I enjoy your videos very much. One question though- You started in 960 grid in AI, but I've noticed that it's a bootstrap-like nav at the top and the carousel is the default bootstrap too (on the demo site).
    Am I being mistaken? If not, how often/ how much do you guys use bootstrap?

    Reply
  • joyce ann donasco

    Visited https://www.ole.ca and it looks amazing! One thing though, tried to click the newsletter and a popup showed up but nothing's in it. Why? Is this still in progress?

    Reply
  • Faisal Khan

    İs it Photoshop?

    Reply
  • James Kurker

    Still waiting on Preview CC to work on android devices…it's not fair.

    Reply
  • ziolp

    Yes ! I'll watch your How to on drop shadows. Better to learn it the right way.

    Reply
  • Akash K

    Wow …issues are more important to me to learn thank you 🙂
    https://www.behance.net/akash02designer

    Reply
  • schakalakadingdong

    "Shut the front door, you lying…!" xD

    That's how we speak in my workplace as well.

    Reply
  • Libby Jones

    Hi Chris, yes pls I would love how to do these 3d shadows. Please could you do a video if you have the time. Thanks from Dublin Ireland!

    Reply
  • jorjlm83

    Great video! It's amazing to see a little about how is a typical work day/process in your agency. Please keep posting this kind of content 🙂

    Reply
  • Abeer Qamer

    How do you set up all the web pages of a website side by side in photoshop like when I click this button I'll land on this page?

    Reply
  • Miron Swyst

    Reason I liked this approach it was very candid…unprepared…what was good is that you were asking questions and it wasn't a passive how to presentation…

    Reply
  • Strength and Grace Movement

    Just learning here. What is the program you are using to create the website? Is it Adobe Muse? Thx!

    Reply
  • IARRCSim

    Invisible link provided at 6:21 to 6:30

    Reply
  • Carolyn Mc

    you guys forgot to put the link in the video "right here" lol but otherwise thanks for the tutorial & insights!

    Reply
  • Spider Online

    what is the best way to design a website is using PS or HTML/CSS ?

    Reply
  • MarieL

    does this got a 2nd part?

    Reply
  • Hipect

    What about font sizes? If we have custom heading on desktop like 81 px and we gonna decrease it on mobile (lets say 2.5 rem) we have to do the rest headings? For ex h3 should be 2 rema, h4 1.5 rems etc?

    Reply
  • Simon Smale

    Loving the way you talk though this process as a designer. Is there a playlist with all the videos related to this project? I seem to have missed out a few bits and can’t seem to find them

    Reply
  • Mohsan Raza

    Team The Future you are HEROs and doing great I really appreciate your efforts. The solution for previewing in mobile is "Adobe Preview CC" its a mobile app just use your phone cable to have preview in your mobile. https://www.youtube.com/watch?v=xeTSjATn8jE

    Reply
  • Justin Roy

    I love these videos! I wish you guys would do more videos like this, because it gives you a more retrospect in the reality of working at an agency along with working through a project. #theprocess

    Reply
  • Reed Anthony

    So…………..Adjusting the size of photos is gonna make it an app? Not.

    Reply
  • derpoverload

    Does anyone know what the transition is called at their intro at 0:34–0:52 where it's like building pixels? I'm trying to make something similar and I can't find a tutorial for it.

    Reply
  • Izdihar Zakaria

    This video is awesome! lucky I found it.

    Reply
  • Dev Ahmed

    Sang is smart

    Reply
  • Cuban Nerd

    This is funny. I used to be a back-end developer a long time ago and I feel like my web designs are shaped based on that. The good news is that a lot of things have changed and are changing for web and app design/development.

    Reply
  • robin reso

    i have seen some really cool "pro facebook adds" were a 1080P video plays….but when clicked the video plays in the upper 1/3 of the framing and a webpage content appears in the lower 2/3 of the framing appears while holding your phone in portrait mode.Are there any aplications/software/facebook manager apps to acomplish this, or is this hi-level webpage programmer skills?thx

    Reply
  • HAHACHEN

    I am surprised with this video. I can't believe that you guys are just a group of wonderful designer but without coding skills?! I thought designers should have basic html coding skills and even achieve a little dynamic layout.

    Reply
  • Matt Hyson

    Did you guys ever do a video explaining the shadow effect? I know I'm almost three years late…

    Reply
  • 808 Eater

    What program do you guys use to create the website ?

    Reply
  • Ajay M

    🤔🤨

    Reply
  • filipalija

    Helped me, appreciate

    Reply

Leave a Reply

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