Graphic Design Tutorial: Web Design Review pt. 2

[@jpslr-86]

At least for me when I'm developing and getting reviews from designers, It actually helps if the do send the CSS values, sometimes "a little bigger", "a little darker" is not precise feedback and we end up in an infinite loop: "A little smaller now". So with the CSS I just put it in and end of story. Also It helps them feel they have the values they want and is "pixel perfect". Great content!

[@thefutur]

yeah. as it turns out, i couldn't stop Jaime from getting into the code.

[@TheDesign11]

Great videos Chris. I enjoy videos like this of a art directional walk through of projects.

[@thefutur]

Thanks. We'll make more in the new year. Just hard to find time since this is not our full time gig. Gotta run a design agency.

[@m-ear]

Just discovered this channel and I am hooked! When could we expect this re design to go live Chris?

[@thefutur]

Emir Alili days away.

[@edwnx0]

All I wanna know is when will we see José design sandwiches?

[@thefutur]

Special episode. :)

[@NightmareMM1987]

where's José btw? Has he got his foodtruck already?

[@thefutur]

Lol. Food truck? Now you're talking.

[@NightmareMM1987]

yeah, we haven't seen him lately, so he must be designing those sandwiches.

[@thefutur]

They're very tasty sandwiches.

[@sgdorin]

Great progress, waiting to catch up on part 3 and see the site live next month!

[@thefutur]

Thanks Black. This whole process has been an experiment with releasing content in parallel to the work. Let's see what happens.

[@sykowhite9465]

love this minimal design !

[@thefutur]

New Cover Art.

[@PoptartsinChristmas]

Awesome stuff Chris, I appreciate the entertainment value as well

[@thefutur]

Glad you were entertained. I was sick so my energy level was low.

[@AaronPierson]

Dig it! I'm really looking forward to seeing the site live.

[@thefutur]

Me too Aaron.

[@solidcake2998]

Listening to Chris Do's critique is great. It's on point whilst being mindful of the hard work that went into the design. This could be due to the editing but I felt a disconnect between her and and the Dev team. She also sounded a little unprepared. The animations are a tad bit excessive, it distracts from the great work Blind produces. Never the less, I am confident the end result will be awesome!

[@thefutur]

Thanks cake. Jaime is preparing the mother of all lists in terms of feedback. She's been on top of this the whole time. Wait til EP 3.

[@solidcake2998]

The Skool Network Thanks for taking the time to reply to my comment. Love the show and can't wait til episode 3!

[@Louisebova]

Thank you for another informative video! I am learning so much. So I hope this isn't a really dumb question, but what program are you using for the prototype?

[@shashankb1729nf]

Waiting to see the new website go online!

[@thefutur]

Shashank B soon.

[@juliosamtoy458]

Men, you guys make me inspired, so more video and big thanks for all staffs

[@thefutur]

Thanks Julio.

[@bernardretutajr.9508]

Wow, just wow.

[@alicesmith9542]

Is that notebook from Muji? If so, I love them and think they are so underrated.

[@thefutur]

time stamp please.

[@alicesmith9542]

The Futur at the end, like 9:20-10:57.

[@JimmyHuynhdesign]

Always awesome tips and wow! What a nice looking website.

[@thefutur]

Your comment made the episode today Jimmy. I read it on air. Plus, I filmed a response to your question already. We will edit it next week.

[@JimmyHuynhdesign]

No freaking way! That made my day. Can't wait to see it.

[@adityavarier7442]

Hey, it would be pretty awesome if you guys made a video series on just the processes involves in different types of projects like Branding, Just Identity Design, Web Design etc. It would help freelancers all over to create their own definitive processes which they can show to the clients.

[@adityavarier7442]

Also, not just your processes, but how to design your own process for a project.

[@thefutur]

Aditya. We are doing that very thing now.

[@adityavarier7442]

Oh, I get that. But what about Branding and Graphic Design? For example, if I need to create an brand strategy and identity system for a client, what steps do I go through? How do I create my own process for a project that help me use my strengths to the best of my abilities and minimize the effect of my weaknesses? I've seen a lot of videos you guys have made explaining how we must go about a particular project, but can I see a single video (or 2 parts like this one) explaining the whole process for one particular type of project? Like an overview, maybe? Also, you guys are saving a lot of time and trouble and helping creatives all over the world like crazy. You guys are so awesome. #theskoolrocks

[@thefutur]

We will capture as much of our process and share with you as we go along.

[@adityavarier7442]

Thanks guys. Keep up the great work!

[@sebastiansantrac]

Great work! Love the simplicity of the site and the new communication! What is the paragraph font on the website? It kinda reminds mi of HK or SF but i can't wrap my head around it.

[@thefutur]

Thanks Sebastian. I'll ask Jaime.

[@evilmonkey6340]

I loooove the design... Can you please ask her what grid did she used.. I struggle with them all the time and i like this one... Please ask Jamie and thank her in advance ;)

[@thefutur]

Will do Monkey. We will record something today and I can ask her.

[@manuelvargas2111]

Really cool episode you guys! What's the name of the ending song? It has a very nice mood!

[@thefutur]

I have to ask Aaron.

[@MarkJamesStyle]

I love you guys. Can i give some feedback? I actually ignored this video in my feed and didn't know it was a new video because the thumbnail look almost exactly like part one. Maybe change the colors on the gradient a little or something. Just trying to help. Thank you for everything guys!

[@thefutur]

Thanks Marcus. I can do that. People complained that the last series, the thumbnails and titles were so different that they didn't get the connection. As an experiment, we only changed the title on this one to see what our audience would say. Should I change more than just the gradient? Do you want to see a different image too?

[@MarkJamesStyle]

Hey thanks for replying! After looking at all the thumbnails in this series I think your idea of changing the background is actually a good idea. I think changing the gradient would stand out but after taking another look it might be inconsistent across your channel. Also one thing that throws my eye off is the "PT.2" text runs over the "We Build Bridges" text. If you look at the video "How to Write Content for Web" you guys actually do exactly that and I think that might be a good solution. So this series is about graphic design and you're using the blind website as an example. So you could change the image by using a different page on the blind website or maybe have a image of Chris Do sitting with his employee here with the monitor in the picture. Just play around with it! I appreciate you guys replying and taking my ideas into consideration. You guys are awesome keep it up.

[@thefutur]

expect an updated thumbnail soon Marcus.

[@rammyvfx3744]

How's the market for photo manipulators? I know it's a very specific branch of design, but it's what I love doing, but is it reachable? or should I strive to design anything and do photo manipulation every once in a while? I'd love it if you checked out my latest video of my own "process"

[@thefutur]

We can review your work but you have to submit a video question.

[@Heartdrive]

Do you send out the designs to a different development company or do you have in house developers? I also hope you dont use pt for text sizes cuz that would hurt my soul. Use rem its sooo much better xP

[@redleome]

May i ask, what programming language did you guys chose to build the site?

[@thefutur]

We are using wordpress as CMS. I assume it's HTML, CSS and maybe some Java. I'll ask the developers.

[@Derek-y9q]

Dude, your handwriting!!!!

[@thefutur]

where? are you saying it's bad or good?

[@cristianoluis8444]

Great content, as usual! Would love to know more about how you guys handle the details such as responsiveness and transitions when the projects shifts from the design team to the developers. Do you work with a developer team in house? I'm currently working in two big projects being developed off site and I find it very hard to pin point details without writing any code as guide, which is exactly what you told her not to do. I find the alternative very time consuming as the developers rarely have the eye we have for this kind of detail.

[@thefutur]

We work with developers off site. The trick is to find great developers who understand and have an eye for design. But we also send very detailed notes along with the files including mobile designs.

[@cristianoluis8444]

Makes sense! But I always thought that providing them a sample of code for certain components alongside with notes and designs would make things easier for them and for me, to avoid stalling the projects with those little details. Just curious: any special reason for the dev team to be off site? I find it so much more productive and enriching when the design and dev team work close to each other in a project that is so vital for the company. Anyway, keep up the amazing work! You guys rule :) Cheers from Brazil

[@thefutur]

Your comment made today's show. You'll hear a response from us in the next video in this series.

[@cristianoluis8444]

Whoa! Can't wait!

[@sidgurjar]

I don't want to sound critical here, but in one of your videos, was it Chris or José, you mentioned not to 'lorem lipsum' your test copy, stylescapes etc? and here you have quotes in lorem ipsum. Consistency is a huge brand attribute, wouldn't you say guys?

[@thefutur]

yep. we are consistently inconsistent. not sure if it was me or jose, but generally speaking, avoid lorem ipsum, when possible. the words inevitably change the design, so you'll have to design it twice. but sometimes, we have no choice, and don't have copy ready. but we're not going to sit around and do nothing. it just means that we have to take another stab at it.

[@agustinruiz2760]

Web design rocks!

[@thefutur]

sure does.

[@numgun]

With all that dynamic animating, content loading and so on, doesn't it get super heavy to browse? Can it run well on slower internet connections/lesser hardware?

[@thefutur]

Good question. We will have to test and optimize. I think the animation happens in code and shouldn't add too much to load times. The work in progress page seems very snappy to me.

[@no.daveed]

MORE!

[@thefutur]

dang. okay. next one will be more substantial. Jaime is already working on some extensive notes for the developers. We will tape tomorrow.

[@no.daveed]

thanks.

[@NightmareMM1987]

Could you also show how you prepare all the material and notes for development?

[@thefutur]

Yes we can.

[@NightmareMM1987]

awesome!

[@TiagoAraujo-pt]

What do you think about the speed of the site?

[@thefutur]

Tiago Araujo seems fine on our end.

[@rdvgrd6]

i hope my boss will be as cool as you

[@aurelianspodarec2629]

I like this, although that's not my thing.

[@thefutur]

Thanks.

[@ChrisEllinas]

Can't waiting to see the new website launched! looks awesome :)

[@thefutur]

Christos Ellinas thank you. Me too. Jaime is making sure every detail is perfect b

[@jaymcd8577]

I can't tell if he genuinely doesn't know the workflow or is just critiquing her on it.

[@paulchua4047]

is she the one who coded the website?

[@thefutur]

no. she didn't code it. just design.

[@AnantGulia]

The inspiration quote slider i think that's usual jquery plugin and i hate these plugins thats why i always custom code it in pure js that way the code stays very light and it works exactly how i want it to and it doesn't take much time to custom code these little things for example i coded this website designed by my client for his client and all of the code is custom used a js library for touch events for mobile anyways i am going in extra details now :P goo.gl/lsHbAJ also there is an hover effect of black and white to colored on images if you wanna check that out. BTW Chris sometimes sending the exact css values are good idea to save time specially when developer is not sitting right next to you otherwise you'll talk back and forth many times to adjust only one value. As always awesome content enjoyed it thanks.

[@bernardretutajr.9508]

Where are the developers? Are they work at home?

[@thefutur]

offsite.

[@miramark]

haha. I know thats the real deal marking up a design or a design specs as they called it. but there are tools that can also help you up on laying over to devs. Like this one: zeplin.io/

[@thefutur]

Thanks. I guess I'm a noob when it comes to the Dev side.

[@miramark]

Hehe. Thats fine everything works we just need to communicate well as the lay over for design to code will work perfectly. Better communication is the key these are just tools to help out. 😊

[@thefutur]

Totally agree.

[@WENDICOOPER]

screen grabs!

[@joebazooks]

i can't go to sleeeeep

[@thefutur]

just keep watching.

[@joebazooks]

The Futur i can't go to sleep, i can't shut my eyes, they shot the father at his mom's building seven times (8) any word yet from aaron on that reggae song?!

[@thefutur]

/ no.

[@joebazooks]

The Futur bruh! you workin from home or something? lol:p

[@thefutur]

/ I texted him. I'm working from Japan at the moment. Diff city. Diff time zone.

[@dodongelmar3216]

I wonder if this girl is a fililipina?

[@thefutur]

Jaime is Korean/American.

[@Websitetroubleshooting]

first

[@thefutur]

Wow. That was fast.

[@Websitetroubleshooting]

What are the breakpoints for the responsiveness? Do you all follow any standards? and what about front end frameworks like Foundation or Skeleton?

[@Websitetroubleshooting]

Use annotations in the mock-up! or Invision mock-ups :)

[@thefutur]

i don't think these are Invision mockups.

[@Websitetroubleshooting]

I know this is the functional wireframe I suppose but when she presents the designs perhaps she could include certain predetermined standards she'd like to see implemented. Just makes life easier as a front end dev myself. I like sharing thoughts, sorry. :)

[@SpookyKillerz]

Her voice makes me cringe :c, but good video tho

[@thefutur]

Cmon. Let's be encouraging and supportive to our fellow creatives.

[@dualshock3]

Ikr? sounded like Solid Snake from MGS4

Was about to say something along that. maybe nicer. but maybe she was sick.. who knows

[@thefutur]

people sound the way they sound. jaime isn't sick. i think we need to focus on something else. like she's an incredible designer.

[@damp8277]

This is called vocal fry and it is not an issue. Not at all. Just focus on the important and awesome part.