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. mydevice.io/devices/ And here you can see your device widthmydevice.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.

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

Thank you!! :) As a beginning designer, I find all the videos you make really valuable.

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 :)

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

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!

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!

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.

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...

Thanks for your videos Chris. They are appreciated.

Love it. And yes for the drop shadow tut!

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

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

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

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!

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

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.

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

Great commentary, and I love your approach towards art direction Chris

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

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!

Helped me, appreciate

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

Such a great series i learnt alot Btw i noticed now that this series is old from 2016 the girl in the previous video used illustrator for web design and she did an amazing job, but now mostly people use sketch,xd,figma but i think illustrator gives cool result then them the reason is wide range of tools and the play around typography

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

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?

All your video contents are really good and informative.. :) but I have a suggestion. If you guys can add visual slides in between or like a note at the end with just the important points like a recap to the entire video then that would be really awesome as well as helpful.. coz u guys say a lot of important stuffs inbetween conversations and while explaining something, which sometimes is hard to follow... or if I have to find one particular info (like the pixel width mentioned in this video) I have to play through the entire video again to find where that particular info was mentioned... Love your videos 👍 this is just a suggestion😉

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

A big Yes to the shadow tutorial! please.

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.

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.

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.

This video is awesome! lucky I found it.

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.

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!

I miss this kind of videos

I prefer the 1200px grid but this is awesome! Also a good comparison for using the grid is like bleed in print. You want to keep all the important content preserved at different screen sizes like you would want to take note of where you'd place typography on a business card.

Have you guys tried using Sketch for web and mobile design? Love that app.

thank you very much for this sir chris

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?

Please do a drop shadows video :D. Thanks for the great content!

Great content as always.

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

It seems to me that the developer didn’t properly structure his html containers in order to allow flex ability with very large screens, the only other thing you have to make sure is the images has enough mega pixels so it won’t look pixelated

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.

yes, drop shadow tutorial please.

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

Ty. Show us the shadow trick in PS!

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?

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

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.

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?

화이팅입니다! 👍

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

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!!!

Thanks for the candid peep show :)

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.

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.

Great stuff as always 💎

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

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.

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

What program do you guys use to create the website ?

The Adobe Preview app is handy for live Photoshop link.

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

What app are you using to build that website

Great job Chris and Sang!! This is so exciting and I can't wait to see the final live site. Miss you all at Blind!

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

You could try Invision app to look at mockups and for feedback too. It's quite nice.

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?

Please do an "How To" on the Drop Shadows.

I wish my internship did art direction like you do Chris

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

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.. :))

Did we ever get that drop shadow tutorial vid?

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

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

I want to learn 3D Drop Shadows

You guys ever Use Macaw or Muse for responsive sites?

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

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... :D great video by the way.. ;) Cheers from Serbia :)

6:26 The invisible link

Drop shadow tut please!

I WANNA LEARN

Drop Shadows tutorial plz!!

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

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

Great work! what happened to the intern who started the design?

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: helpx.adobe.com/photoshop/using/devicepreview.html

Visited 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?

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.

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

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

14pt is the ideal font size for eligibility. Just sharing... :)

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

does this got a 2nd part?

Do you think Bootstrap works better than 960?

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.

Why not SketchApp?

Sang is smart