Your Layouts are BORING! Layout Design Tutorial

www.linode.com/... - 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: logodesi...
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!

[@TheNewton]

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

[@FabricioRodrigues...]

it's all about portifolio bro

[@randomuser66438]

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

[@willmakk]

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

[@randomuser66438]

@@willmakk Whatever makes you sleep at night

[@stevensavoie856]

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

[@datmanUK]

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.

[@ihortkachuk3011]

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]

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]

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]

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

[@semiyuri]

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]

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

[@anthony452]

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

[@TuneAddikt]

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]

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]

@@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]

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

[@Gigusx]

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

[@willf.h6951]

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]

I hear you brother

[@programaths]

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]

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

[@lunaticz0r]

Haha Tessa's slicing images

[@randomuser66438]

You're just traumatized

[@DesignCourse]

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]

Very Excited

[@PatrickRams]

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

[@parthkumarchaudhary]

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

[@haveagudday8068]

From a marketer perspective, no way i would apply these layout to my website. It's just too confusing and takes more brain power to navigate which is bad. Maybe just for personal designer collection then it's okay. The problem with some designer is, they demand so much of their own idealism into the real world scenario which is umnecessary for the customer. And in return much more cost spend with a little return on investment.

[@xstrafez_c2017]

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:

[@CombobreakerDe]

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.

[@nickscarfino8695]

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!

[@Gigusx]

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.

[@TheActualTed]

What's the deal with extremely simple wepages with HUGE elements and two flat colors? I get artists like minimalism and it doesn't look bad but I mean, we are in 2020, 4K and 1440p monitors are a thing and when I look at a webpage I usually need a lot of information not the usual marketing nonsense and an email address at most. I feel like it takes away a great portion of the personality webpages had few years ago.

[@mortkebab2849]

It doesn't make visual sense to me to lop off a corner of the rectangle for no logical reason but just to be "different." The arbitrariness of that offends me aesthetically and intellectually.

[@hcx1853]

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

[@-ct-celcomtechniques2566]

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

[@TheNewton]

0. Client Budget

[@Punisher4xe]

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

[@radongtawco9432]

where is typography?

[@graphic_design5660]

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

[@sahil.chougale]

Hello sir please create second part where convert this designs in HTML CSS with Media Queries and Animations. Anyone Need Sir to create this designs in HTML CSS please like this comment. Happy 2020

[@frenic906]

They're all the fuckin same. Logo top left. Nav top right. Content in the middle. Footer at the bottom. Where's the mystery?

[@brianfriedman101]

I don't like unique I like boring. btw your "unique" is not unique we've seen that design a million times before. You even have "unique" artsy WordPress themes. So boring

[@yumpiri]

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

[@markli5027]

These are not best practices when designing a website. I’m dying inside watching this! Do not apply his layout techniques:(

[@jawadeladnani6248]

why ?

[@s4ndeep1203]

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]

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 😂

[@alveek]

Reminds me a magazine layout

[@waruidenis-fxtrader8479]

his own website is boring...... Guyz check out coursetro.com his own site. No different from what he is describing as boring sites. Atleast the boring site works for you .

[@nandomax3]

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

[@joeldcanfield_spinhead]

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.

[@25cawboy]

Me: Hey, Why do you say that, my layouts are not boring! Also me at the half of the video: Okay, maybe you have a point...

[@pensiveintrovert4318]

Can just never get to the point. It's like pulling teeth, listening to this. This could be 7-10 minutes.

[@muralidharan2044]

that home page sucks . i am honest. dont want to give you false hopes

[@ceskyy_5645]

Lol this video titles, "you just create shit, watch the video and learn" yeah thank you.

[@VisualTimmy]

just because its UNIQUE doesn't mean it's EFFECTIVE, and it doesn't mean it CONVERTS or drives RESULTs.

[@dev__adi]

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

[@Steve-Richter]

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

[@DGHF]

Which Software is that?

[@rusicsemenov]

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

[@jmbeatsbbx]

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

[@SAAARC]

lol

[@rumble1925]

This should be titled how not to design for the web.

[@schism1986]

This is a nice lesson in design basics but the problem with it is that you're creating random content to serve your design needs instead of the other way around. In real life you have to work with the content you're given and can't create a block of text or produce a pretty image to fill out your white space anytime you feel like it would make things prettier. Good video though, don't get me wrong, I watched and enjoyed all of it!

[@ZARRKK]

Take thinks out of content 2:16

[@Kimeru]

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

[@Dmitrioligy]

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

[@musthavechannel5262]

The "Get Bored" CTA. haha

[@olitilak_22]

Aren't they a lot tricky to structure them in HTML and CSS?? By the way...great designs.

[@slubdub4971]

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

[@MichaelTutino]

We have a responsibility to the client to advise them about good design practices. If they choose to ignore that, then do your best. However, sometimes the client/designer collaboration works out well. They may steer you in a direction you may have not considered, and if you take it as a challenge you would be suppressed where you end up. BTW you should never work cheap (as one respondent said) because it degrades all of our work. Now your clients are expecting to pay basement prices for top-shelf design.

[@matthewogunmola7615]

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

[@w0mblemania]

Question: what happens to your design when the text overruns the permitted areas? Answer: the pretty design falls down in a heap.

[@RayMitchellSt]

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

[@vivianliu5011]

I always think design should base on content, not we have a layout and ask people to fill in the content based on the design... the layouts are cool but only cool when you have such amount content. I actually more hope to see a requirement and how you absorb the requirement and show different design options and maybe share why you do that.

[@rosselliot8971]

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.

[@pxjesse8128]

I love how these layouts look, but imo they aren't functional. I've found that this overly minimal approach is very hard to apply to websites that actually want their content to shine. With these types of designs, it's not the content of the website that gets the attention, but the layout itself. I personally think that the layout should really only compliment the function of the website, whatever that may be in any given project. It shouldn't steal the show.

[@LostAlienOnEarth]

Why are this people complaining? Of course you have to plan your site for mobile devices, but mobile devices are really limited. If you're complaining about writing code, stop being lazy for a second. I love being lazy too, but build something inspiring for a change please.

[@msunardi]

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

[@AndresPazSoldan]

Some layouts are weird for responsive sites. You’ll bring hell to the front end designer haha

[@xXDameanXx]

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

[@darndarn99]

Boring works great for conversions , keeps the user focused on the call to action so give me boring all day long , money money money baby !!! I do find the problem with designers is that for them ( understandable) it’s all about looking pretty , but being pretty does not sell products or services, sales copy does .

[@Pogohontas.]

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

[@IseeWhy]

In Figma this is easy but getting layouts like this converted to an actual working webpage that is also responsive is a whole different story...

[@vinceofscandal]

Hmmm sorry not the correct design process, nor for web, nor traditionnal design work. So youtube its a fantastic source of knowledge but going to design school will give you better skills and practices. Keep this technik for to make namecard or random pitchdeck, but nobody needs youtube to see when elements needs to be aligned, use your eyes guys...

[@ragavendravignesh1028]

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

[@xGSTQ]

Mobile first and responsive design... Oh wait your making a desktop layout 😉

[@rudrapratapsinha8880]

I copy such shitty looking sites when clients demand sites like Ebay for like 5 bucks.

[@georgetuges4821]

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

[@thinkermania4972]

Step 1 , Get a Logo Design , Step 2 : extract the colors and Use that color pallete. Then continue working on site

[@DanielLavedoniodeLima_DLL]

Looks like it'll be great for an art gallery or cult cinema website, but idk... I agree the same old design is kind of boring, but I don't fill like that'll fit in a commercial website

[@aracon9721]

Sounds and looks all cool and stuff but when I'm on my own I'm out of ideas

[@ctx4241]

I kinda get the point but obnoxiously big elements and neon colors are around for a while now. IDK if those layouts in video are any less boring than example at the start

[@shawnnosaurus]

But the menu padding from the right of the page, doesn't match the left page padding.

[@vcodev108]

making the site responsive is going to be very hard for such designs, it looks pretty but on mobile? even we have different screen for desktop design as well.

[@dotfundavid]

Question, how the heck do I make his in elementor. Particularly the angular action

[@eliasserneels7269]

Just putting random shapes on a screen doesn't make this a layout design tutorial.

[@mylenna922]

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

[@Rapidodalua2008]

this is why developers hate designers. not only we need to pull the impossible. than we get shit from project manager and client because they set the bar way to high

[@TheMrtastee]

What kind of Bob Ross is this, with all the happy squares and stuff?!.

[@jainishsakhidas4571]

I didn't understand how to add that black tilted rectangle in the website , Can someone explain ?

[@jacoballey21]

i hate having to watch a commercial, only to have to listen to another commercial right after. just sayin

[@brandonlee712]

I wish you would have a tutorial on going from XD to Code.

[@dacitto]

Honestly, I didn't like the last design, but the others are Good.

[@bojankustura9138]

whats the name of the program used for this video??? i didn't get .. :(

[@andrewrico8321]

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.

[@piyushupadhyay4633]

THAT'S ONE MOTIVATING QUOTE....----_____----.... Superb explanantions though!! Thanks a lot

[@theEXOaudio]

I don't know why a lot of people are negative about this. It's just a little bit more complex. I've seen a lot more complicated things than this. It still works for the eyes and follows the golden ratio layout. still has harmony, follows all rules of design with spacing, typography, visual hierarchy etc. what I really think is important is that your layout should follow your target users. like social media where it is user content-driven apps and sites. so it makes sense to use that "common" and "normal" layout. but for other websites and brands which showcase their tangible product like gadgets, it's nice to have a showcase type of website. this is like those films today that are just a bunch of sequels and remakes because it is a fast-money for those companies. and yes web is different than film. in web you need to understand your user's needs. but everything has its place. some websites need to be clean some websites need to be unique. every website or apps solves different kinds of problems.

[@waqariqbal19]

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

[@Mayank-rs7kg]

How to get access for your UI course please put the link

[@Omerko]

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

[@tusharmaurya1668]

Dude....its not my layouts... Its me... I am boring :(

[@DesignCourse]

I'm really boring too.

[@tusharmaurya1668]

OMG a heart.... Thanks a lot... Btw i love watching your videos, not really into front-end but still enjoy them a lot... And happy almost new year!

[@dishantpal37]

one of the best ways to go in 2020

[@chandrus03]

What does your logo means? The 3 dots..?

[@epicmetod]

I wish i can make living by design boring website lol.

[@parthkumarchaudhary]

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

[@DesignCourse]

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

[@georgeliss4015]

not a huge fan of #1 or #2, but #3 is FIRE!!!!!!

[@sadeghbarati1717]

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

[@thinkbig5936]

In the 2nd layout the image is not upto mark.

[@Diff3RentBreed]

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

[@moarab936]

I have looked at some layouts on this channel, and they are always the same.

[@ThePermaro]

I thought this was about layout but it looks like a figma tutorial

[@jainishsakhidas4571]

Can you make aa tutorial for the third layout please ?

[@zwiebec78]

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]

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

[@Fingiorstyle]

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

[@suzannes4619]

Many helpful tips thank you

[@MrDragonheart007]

cool video.. made me subscribe !!

[@evelynestrera1055]

What will happen into a business or product or services when lay out design was ommitted?

[@evelynestrera1055]

Please answer my question

[@자시엘-l1s]

Why is XD forcing me to login every day and be connected to internet Annoying Thought I’d be free from that

[@Gigusx]

And for whatever reason, I can't use SVG files in XD. I switched to Figma, way better.