Your Layouts are BORING! Layout Design Tutorial

Подписаться 1,1 млн

Просмотров 359 тыс.

50% 1

www.linode.com/designcourse - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
- Let's face it, we see a lot of the same work from many UI designers. That's not necessarily a bad thing, because some patterns are tried and trued. But sometimes, you need a more unique approach -- and that's what I will be helping you all with today! I will design a few layouts from scratch and discuss my approach when coming up with more unique layouts.
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Хобби

Опубликовано:

29 дек 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 316

@datmanUK 4 года назад

It’s cool if this is your own project. As soon as a team gets involved and user research / testing you are back to version 1.

@anthony452 4 года назад

I am TERRIBLE at design and came out with a really good homepage after watching this. I really appreciate the tips.

@willf.h6951 4 года назад

This is how we designed websites 25 years ago. Back then we were all print designers exploring this new web design thing. We didn't have mobile or any interaction to worry about but we still crashed into loads of issues such as colour consistency and layouts breaking across different screen resolutions. No CSS meant we were shoving sliced up ps files into html tables and padding out with millions of blank spacer GIFs. And when you finally got it right you realised how naff and outdated it already looked so you had to bin it and start all over again. There's plenty good reasons why websites look the way they do today. Natural evolution. Let's not go back there!

@alexytou 4 года назад

I hear you brother

@programaths 4 года назад

Still remember when we even had to remove ALL white-space between markup otherwise you would en up with broken design. That was definitely fun :-D

@joeldcanfield_spinhead 4 года назад

Always put your closing td on the same line as the content! (And 99 other nitpicky hacks. I miss it not one whit.)

@lunaticz0r 4 года назад

Haha Tessa's slicing images

@randomuser66438 4 года назад

You're just traumatized

@TheNewton 4 года назад

Boring client budget boring layout design, and there is nothing wrong with that.

@FabricioRodrigues... 4 года назад

it's all about portifolio bro

@randomuser66438 4 года назад

Bad work ethics, unless you warn your client you're going to deliver some low-effort garbage.

@willmakk 4 года назад

@@randomuser66438 You get what you pay for, oldest trade rule in history.

@randomuser66438 4 года назад

@@willmakk Whatever makes you sleep at night

@stevensavoie856 4 года назад

@@FabricioRodrigues... not if you have a portfolio. That approach is overly simplistic. For me, I do need to build a portfolio, so I don't mind working cheap for people I know, or want to get to know. Building a portfolio and building a network in one go.

@DesignCourse 4 года назад

Subscribe up, because in 2020, we're going to really focus on UI and (UX especially). See ya in 2020! Edit: Those dislikes tho -- C'mon people, don't take the title of this video personally! 😂

@LabhamJain 4 года назад

Very Excited

@PatrickRams 4 года назад

One of my main goals is to learn UI/UX design in 2020... already subscribed..

@parthkumarchaudhary 4 года назад

Yes we are going to focus on UI/UX and 1M subscriber 😍😍😍

@TuneAddikt 4 года назад

Cool layouts. From a responsive development perspective though theres a reason simple arrangements are preferred. Not only that but as you said, when it comes down to AB testing, users almost always prefer the simplest layout as its more familiar to them amd requires less thinking and effort to understand what theyre seeing. Take nothing away from what youve done here though but these things can really come undone through user feedback (in my experience anyway)

@danielgn6227 4 года назад

Just had something like this in one of my projects. I made an interactive calendar to show the schedule of a club, but apparently the club was receiving a lot of mails regarding schedule since the users didn't realize they _had to interact_ with the calendar. Now we have a boring, plain table with the schedule and manually write the holidays. We've haven't got more emails on that subject since.

@TuneAddikt 4 года назад

@@danielgn6227 I hear you on that. Sometimes I've found it useful to drop in plain text hints as guidance. Its always a bit of a downer having to do it but in your circumstance it might be something like a small hand/cursor icon with text next to it saying something like hover on the calendar to get started. Essentially its always about considering your dumbest audience first and working backwards from there ;)

@lunaticz0r 4 года назад

That mostly just says your application of the technique is not good for that particular target group and that is fine 😁

@Gigusx 2 года назад

@@TuneAddikt An interactive tutorial would work there, probably. Could start with a tinted background and a prompt, or simply an animated button, to either start the tutorial or skip it (for more experienced users), either of these would make it clear that the calendar is interactive. I hope they at least considered that before deciding to scrap the whole idea LOL.

@nickscarfino8695 4 года назад

Extremely useful video! Would love to see a tutorial on how a web developer would decipher a prototype and create a website accurate to the initial design. Thank you for all you do!

@Rodbove4Jam 4 года назад

This video is really useful! I have very poor front end/design skills and been learning a few things to complement my back end but I actually ended up using what I learned here to design a pretty not so boring resume, thanks!

@xstrafez_c2017 4 года назад

This was very helpful and I'll try to apply this when building my own. I would really love to see how to implement this in HTML/CSS properly as someone has already mentioned as well c:

@FXMSPreview 4 года назад

Fresh designs dude! I love watching these videos to get inspired/step up my game!

@pauljessee8611 4 года назад

This was one of the most helpful design videos I’ve seen in a while. Thanks for posting this!

@ihortkachuk3011 4 года назад

Goes great, but please, make a video how to structure and style it in HTML and CSS properly, it wound be super great for fronties.. Happy 2020!

@semiyuri 4 года назад

That would be great! I kind of struggle and therefore avoid using those watermarks and out of flow positioned elements since it is quite tricky for me to make them responsive.

@beinyourguard 4 года назад

I second this. That would be neat. But I guess the future (if not the present) is kinda using those generators to create the websites.

@AFMCarlos 4 года назад

Wouldn't it be a good idea to do it on Workflow or Elementor?

@semiyuri 4 года назад

Well, at work I don't really have an option to choose the CMS or the framework to work with so need to know to develop it from zero. Also I think those pages made with CMS are very similar due to the templates base so I am leaning more to the custom and unique webpage creation on React or Vue for example, that's why I am really interested in creating those responsive interesting layouts and UI components.

@Gigusx 4 года назад

@@semiyuri Read on relative/absolute positioning. It's pretty easy to do once you get it.

@JR-gh8lp 3 года назад

Your videos are amazingly clear, easy and informative to follow. THANK YOU!

@urhorattel 4 года назад

Thanks Gary! You always have simple and very effective tutorials!

@xXDameanXx 4 года назад

Im a coder, dont understand much about design but this tutorial really helped me to have an idea or a system to start building my own stuff

@thallesdesouza 4 года назад

You're helping me so much!! Happy 2020, Success!!!!

@peepokekler 4 года назад

Thanks for introducing me to blocks! Can't wait to try it out.

@alexkozhemyakin1835 4 года назад

Thank you very much for such an amazing video! Waiting for the new tutorials and recaps of the UX / UI designs.

@hcx1853 4 года назад

UI Design Fundamentals 2:30 1. Contrast. 2. Color. 3. Scale. 4. Proximity/Alignment. 5. Visual Hierarchy/Layout.

@-ct-celcomtechniques2566 4 года назад

...Then break the rules ! Almost perfect here @ 9:36

@TheNewton 4 года назад

0. Client Budget

@Punisher4xe 4 года назад

Yea, his design breaks rules and this is the reason why it isn't boring.

@radongtawco9432 4 года назад

where is typography?

@graphic_design5660 4 года назад

@@TheNewton In my Opinion, Everything is not about Budget. This is whitewash for the insufficient design. Every time we can find best design solution, even with small budget too. This is my opinion , not rule ! ;-) . Also that is your opinion , not rule !.

@sarahmattar 4 года назад

This was a great video on the design elements and fundamentals of layouts! The Scrimba platform is awesome for being a live canvas for coding - translating that live canvas concept to a design course, are you going to be able to manipulate individual elements and blocks on the screen?

@Gigusx 4 года назад

Block, block, block! Just halfway through the video and I can already tell, this is one of the coolest videos you've made, and I love the more creativity-related topic! How much of this applies (I'm assuming this won't appear in the next 20 minutes) in designing UI for apps, dashboards, etc. where the functionality is more important than aesthetics, and you usually have many traditional, recurring elements? I see so many amazing designs of those things on sites like Dribbble and they get both the looks and simplicity right, but often wonder how did those ideas come together and what techniques can be used there.

@pranoymehra2150 3 года назад

Loved the tutorial

@mehmetemin5404 4 года назад

amazing video as always, i feel like my skills went up after watching it. Thanks Gary

@laumajankevica 3 года назад

Amazing! I learnt so much from this session. I been doing few courses in Udemy uiux but this one makes so much more sense and I learnt so much more then in the paid courses. Thanks for this chanell definitely following you. Lauma

@annettekempers6213 2 года назад

Very instructive, thank you! It will help me make more conscious decisions about my layout.

@alveek 4 года назад

Reminds me a magazine layout

@suzannes4619 4 года назад

Many helpful tips thank you

@mathiasriissorensen6994 4 года назад

I'm impressed by how well it is done cutting out the background and only showing you when presenting. I'm going to do similar work at my workplace. What equipment and software are you using? And are you using a green screen?

@SnakesRaven 4 года назад

Helpful and inspiring. I learned a lot!

@yumpiri 4 года назад

I appreciate your effort to get rid of the boring designs. However, some layouts exist for a reason, for example eye-tracking (f-pattern etc.)

@ShawnRitch 4 года назад

Thank you for sharing these ideas with us. I really enjoyed it and may use something similar in some of my upcoming web app projects ;).

@Diff3RentBreed 4 года назад

Scrimba you say?!?! One of the best learning sites I have found! :D Can't wait to get your UI course!

@usaava 4 года назад

Thanks for your video, happy 2020

@TheElkster 4 года назад

Always great to see someone working outside the box and give examples of what else is possible.... my problem is expanding on that (I'm so not creative) and also how to change it for various screen sizes :( good video though ;)

@DylanTheClutchGuy 4 года назад

Amazing tutorial once again!

@fabiocruz6713 4 года назад

Really nice tutorial. It would be amazing having the mobile version design explained as well. Sometimes is hard for me to design in mobile this type of Layout. Keep up the amazing work! :D

@trinibase9565 4 года назад

Great for a magazine or pre-mobile world. Good advice for Desktop apps. Thx

@sleepingUgly 4 года назад

this is fantastic. Thanks for insights

@hworknet 4 года назад

Nice lesson! Thanks.

@georgetuges4821 2 года назад

Thanks, Gary for this timely tutorial, I wish I come across it early, never too late I guess. Gary, what this design app are you using, anyone gets to tell ? Cheers guys

@msunardi 4 года назад

Would you do a video addressing accessibility in web design? Like, how to make sure cool UI design is still compatible with accessibility needs like contrast, should you use mouseovers, pop-ups or modal, using html attributes etc.?

@Steve-Richter 4 года назад

What to do about user’s with larger, wider desktop screens?

@mateuszdob8462 4 года назад

Hi, this design is very awesome, I know maybe it is a stupid question but I'm new, how to create a strip that on two sections? you import this to a background or you creating 2 div in code? thanks

@mkm1015 4 года назад

Gary, you are an awesome dude. So much knowledge & tips on your channel. Thank you for everything, seriously. A quick question- I want to get into graphic design but don't know should I focus just on one thing (logo deisgn or web design for example) or be a ninja master like you?? :) I mean you know EVERYTHING ( logo design, web/UI deisgn, front-end dev) Specialize or generalize? What is in demand?

@sadeghbarati1717 4 года назад

hey gary :) can u just how to transform this design to html with css grid in other course ? coz it so confiusing how can i do that Layout in web ? position absolute ? grid flex which one is better perform this layout

@s4ndeep1203 4 года назад

Unique layouts are great! but they can be a pain to implement. Add to that the need to be responsive, and it quickly becomes a nightmare. e.g the last design you showed would be tricky to make responsive. I think that's why most designs are so plain and uninspired these days. Because of the need to be responsive. I loved all the tips you gave. Thanks !

@killmewhileimahead 3 года назад

I used to kill my self trying to code some unique layout that everyone would think was cool, finally I just broke down doing a project and used the standard “boring” layout and saved myself sooo much pain 😂

@cyanbeam 4 года назад

Thank you! 😀

@LabhamJain 4 года назад

Love You Gary 3000!

@BionixMC 4 года назад

I didn't even start watching this video and I already added it into my web design playlist

@matthewogunmola7615 4 года назад

Do you have a portfolio that showcases your production App/ Works..I would love to see them...You're fantastic Gary

@nerosonic 4 года назад

this is very helpful! thanks

@andrewrico8321 4 года назад

you also need to include the importance of how browsers crawl your page, in many occasions you may encounter layout or color contras issues. sometimes when you care about SEO or Performance you end up designing the bowsers recommendation instead of the original design.

@mylenna922 4 года назад

Pretty dark quote on a bright theme. I'd say that's a good contrast. Thanks for the lessons.

@Pogohontas. 4 года назад

I like the sentiment; think outside the box, try more unique stuff. One thing I'm wondering is the affect of UX, readability, conversions, all that stuff. To my understanding, simplicity is king. I'd love to hear your thoughts on this

@jamiecorkhill7468 4 года назад

You mentioned that choosing photographs is a very important topic. What methods do you commonly employ when photographs are chosen dynamically and at run-time through code? I've heard of colored blurs or drop shadows based on colors within the foreground of the image being used. Thanks.

@neon7874 4 года назад

happy new year bro working hard still take a break a little...

@dev__adi 4 года назад

The concepts you are teaching are great. But maybe you should also give the audience a heads up of keeping fluidity in mind. A dev can easily make all three designs with flexbox and grid for say Macbook size but when the width decreases a little we will start seeing problems with design 1 & 3. Consider the nav items in design 1. When you decrease the width, the links will start coinciding with pink box and will not remain readable. Same issue in design 3 with text inside black coloured skewed box

@pushismano77 4 года назад

👍. Happy new year 🎉🎉🎉

@Fingiorstyle 3 года назад

Very beautiful designs, congratulations!! Only thinking about the responsive...

@avneet12284 3 года назад

Truly refreshing

@jmbeatsbbx 4 года назад

I thought I was going to die for a while. *FANTASTIC*

@SAAARC 4 года назад

lol

@slubdub4971 4 года назад

What do you prefer to wire frame, way to many options. I think I'm going to just go with Figma.

@ydherdn 4 года назад

Thank You

@RayMitchellSt 4 года назад

Could you go over how to make something like this but mobile friendly?

@ardianfazricom 4 года назад

Thank you

@rosselliot8971 4 года назад

As many have pointed out, the problem isn't so much design, it's translating it to markup including responsiveness. That's where the time and money comes in. Boring designs are common because they are less problematic to translate to markup. I also suspect that because so many developers at the low-mid end of the market also do their own design or have clients who need low cost off the shelf solutions this feeds into the ubiquity of such designs. Actually, this is no different than any other aspect of supply and demand. Bespoke design costs money.

@USONOFAV 4 года назад

Would you be able to do a video for a design layout for Enterprise app that involves forms and table that is responsive?

@Kimeru 4 года назад

How would you go about implementing a background like that of the second design in HTML+CSS?

@Dmitrioligy 3 года назад

That is a great question, I thought about it for a bit just now, but immediately have an issue with fonts increasing in size with browser zoom, window resizing, and then mobile would have to be different for obvious reasons. I would assume a vector and would have to test several positions out as it may need to animate as window/zoom levels change. Interesting question...

@dallin_stagg 4 года назад

Can you make a video on designing a basic website! I feel like I can design something like this fairly well, but I'm not good at designing different sections of a website that both contrast and compliment their surrounding sections

@anuj1715 2 года назад

Nice brochure design bro

@Omerko 4 года назад

Awesome video!! Will you code some of those Layouts?

@TheAkiller101 4 года назад

Love This video , Please Make a Comprehensive video on Color Schemes Please , Thank you

@charlesxavier77 4 года назад

Can you please show us how would you code the last design and also how would you make it responsive?

@dishantpal37 4 года назад

one of the best ways to go in 2020

@zwiebec78 4 года назад

this was interesting to watch - your 2nd design reminds me of a design I did about a decade ago......when mobile wasn't a thing. I'd be VERY interested in how you would make these designs responsive! any plans for this type of video in the future? Thanks, keep up the good work.

@reristavi 4 года назад

I did the same back in 2006 :) things were done using Macromedia Fireworks and Microsoft FrontPage.. Oh what times.. CSS was so poor and hacking it was a crazy thing

@waqariqbal19 3 года назад

Love your, I want you to please update the videos about ui desgin, please

@groovebird812 4 года назад

Nice video. Would be good to know how this examples work on mobile or smaller screens :-)

@rusicsemenov 4 года назад

Really cool design, but you dont say how they adapted in mobile version.

@nandomax3 4 года назад

How would you adapt those to mobile? As a Front-end dev I tend to use mobile-first strategy.

@joeldcanfield_spinhead 4 года назад

If you use flex or grid for the layout, leaving pure design elements static where possible, the blocks reflow to the screen size. Of course you have to watch for contrast issues like that angled black band, but that's doable.

@jovanih.design 4 года назад

Would be great to see u do the same video again but with taking a mobile-first approach as I’m wondering how these designs translate on smaller screens. Also, do you think a mobile-first approach may hinder your creativity once you start working on the desktop design? Is it really just a matter of trusting and working with your dev team?

@roshanmenuka7651 4 года назад

Nice one !

@mohammedhaneef5256 3 года назад

Okay, but what about following a grid system and wireframing beforehand? When and where should those be used and why?

@bhagyashreegaonkar9191 4 года назад

This video is really very useful. can u guide in mobile app design for creative layouts? Thanks :)

@fishionboy9911 3 года назад

Hi ! Just new subscriber here! I love how in some moments, it seems that you don't know what to do, and how you solve the situation. Because in my case, I look like the dog meme "don't know what I'm doing" xd Thanks for the master class

@killmewhileimahead 3 года назад

The boring layouts actually really work for what most clients need. Especially when the demand for responsive is so high. Maybe in 2012 when 30% of users visited sites through mobile I’d be down for more “fun” layouts but the times have changed.

@chrise5238 4 года назад

Love the thumbnail 😂

@MrDragonheart007 4 года назад

cool video.. made me subscribe !!

@ishtiakahmed6336 4 года назад

Howdy Gary. Hope you have a great year. May the Almighty gives you more happiness and success in 2020.

@jessicaroselopez6 2 года назад

This aged well

@DeepSpaceX 4 года назад

I love the thumbnail.

@ragavendravignesh1028 4 года назад

What is the name of that tool, you are using?

@Akshatgiri 4 года назад

Alot of devs in this comment section worrying about responsiveness and how to structure these layouts in code, and for good reason. But as a dev and a designer, it's important to be able to switch off your dev mind while you are just designing. Design what looks best/unique/represents the brand. Design as ambitiously as possible. Worry about the code once you are satisfied with the design. You can always scale back the crazy parts of the design if they are really hard and time consuming. One thing i've experienced is that everything is possible to code out, you might need to push yourself a little bit. Thanks alot for the design tips Gary 👍

@CombobreakerDe 4 года назад

Cool design for a magazine or a flyer. But for a website this looks really odd. I don't understand why people/designer tend to use so much whitespace and big effing huge fonts like this on a website. From the user perspective I find it very annoying to scroll through tons of nice looking animations and stylized stuff to basically find a contact form. The only thing I could understand is that this kind of stuff sells well. Client is impressed by the looks of it, pays tons of money and doesn't think about usability.

@parthkumarchaudhary 4 года назад

Thanks for video..... Any updates about UI/UX course???? I am waiting................

@DesignCourse 4 года назад

It's looking like some time in February, and it will be released on Scrimba.