Do you produce BORING layouts? Here's a QUICK Fix
HTML-код
- Опубликовано: 12 июн 2024
- bit.ly/3sNHphG 👈 Design & code like me. Use "UI2023" for 23% Off!
codepen.io/jipdev/full/ZEJOWjP 👈 Layout Generator
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, I'm going to show you a technique that will help you break outside of the boring box and into a whole new world of unique and interesting layouts using a free tool.
0:00 - Intro
0:37 - Layout Generator
2:08 - ChatGPT Fictional Brief
3:39 - Design Timelapse
5:20 - Final Result & Thoughts
Let's get started!
#uiux #uidesign #figma
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: 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 Designcourse.com.
Come to my discord server or add me on social media and say Hi! 
Хобби
What'd you think of the design produced? Give it a shot yourself and see what you come up with. Tag me on twitter #boringlayouts
Let's try to develop it maybe 🙂
Looks great, if i had to critique I would say it is missing those micro lovely subtle animations that you yourself always love to see and so do we 😀
It's challenging to advance the design while maintaining functionality. We must adhere to usability principles, integrate essential marketing strategies, and avoid overwhelming users with multiple calls to action.
Maybe not having this type of design as the Hero could work? With little CTA sparkled between
Thank you soooo much for making and sharing this tool. I too get stuck with layout ideas, but this will mitigate that problem promptly. Much appreciated!
I mean the result is basically a left aligned text box with immages on the right which is not that different from the well established pattern. There's a reason why it works but I agree that looking into grids makes the layout a bit more dynamic
Awesome vid Gary! Love this type of video very straight to the point 👏
Pure gold! Thanks! Great content and a valuable one for sure! 👏👏👏
Great tips on designing fresh layouts Gary, thanks for sharing!
Great resource! Thank you! I have an upcoming redesign project coming up soon I think I’ll try using this on!
Thank you, that’s life-changing!!!
Life saving tool, thank you
This is cool for the design challenged, of which, there are many!!
It was interesting approach, thanks for sharing ❤❤❤
Clever little tool. I shall experiment with this especially when I get "writers Block". Thank you.
Holy smokes! Thank you so much for this nifty tool. It just saved me some headache...😅
Great video. Suggest you hide your chat GPT history. Not that I care, but the internet is a weird place
I thought about it. I looked at it, and was okay with what was shown. My wife uses it for her lactation consult business lol, thus some of those searches.
One major challenge I actually have isn't the hero section, but sections beyond the hero section
This is great, as are some of your other layout tutorials but I would really like to see how an example like this would translate into a responsive design which looks good on tablet and mobile viewports.
Thanks Gary I want to make my Own Website and this helps me big to find ideas thanks🎉
I like it ❤
También me sirve, ya me suscribí desde el otro video😛
This is pretty cool, being able to partially offload the first step is a pretty smart way to gain momentum in a new project, plus it presents a new mini challenge, I love it.
Can you create a follow up video where you actually hand code this landing page? I think it would be a great thing to tie it all together for us web designers who also hand code our sites
You just put your finger in the wound between developers and designers. This makes for a nice layout, however ignores the practicality and reality of different screen sizes and devices.
How would you dynamically fill this with a loop??
Sir please guid how to create vector minimal images for figma designs
How do you make it responsive with bootstrap?
To me most website users expect a good level of familiarity with their experiences, so opting for a wildly different, or new approach could wind up decreasing conversions. Maybe if the website is supposed to be artsy, cutting edge, or experimental you could get away with it, but for most, following proven design principles is better.
Too an extent I agree, but the web is slowly changing from the old school boring design, brands want to stand out nowadays. I am finding more and more brands have at least a touch of flare to there website and unless you have both practiced the extreme and learned to tone it down you're not going to get better as a designer. Design is everchanging and we need to keep up.
Correct. Newer designers tend to lean to design to impress other designers and not for the average consumer. Older designers like myself design for UX because we started during the time of dial up and no smart phones during the dotcom boon where content and simplicity were King.
Simple clean lines because we come from print background where you learn how users scan pages and digest content.
Just because you can doesn't always mean you should.
How i use it for sign up page ?
Thanks for sharing your nifty Layout Generator and how you use Chat GPT! Would you recommend learning Webflow for web design? Love the program but was put off by the fact that you have to host the site on their platform
It’s a good visual way to understand code. Webflow is probably to most popular and advanced no code tool with a steep learning curve which will yield great learnings, but if you want to launch a website fast, framer is great.
Webflow, framer, wix studio, all worth giving a shot to see if you like it.
If you need to build something fast and get some general UI design practice - yes
if you want ownership of your files and where to deploy - Wordpress
You don't have to host with them. You can export the code and host yourself with a paid workspace. That's what we do.
U'r awesome .
Thanks, but I do not feel that way 😬😬
Piet Mondrian would be proud. 👍
I don't think those layouts are boring. It's just people don't know how to execute them in an exciting ways. They jst need to mix them up with cool typographic and graphics to make them standout. Saying those layouts are boring is like saying circular wheels are boring, and we need to reinvent the wheels.
This is super nice. I would also share it with my Linkedin audience as well in the upcoming days. Quick question: How it would look on tablet and mobile? Thanks a ton!
this concept has a nice and clean aesthetic, but how would it translate over to mobile? I dont see this grid concept translating very well over to mobile
The process of making a brief with ChatGTP to practice is great. But I disagree on several points. The structure should be functional and help communicate the message, not something stylistic. On the other hand, the grid should help structure the information and make it easy to understand. The result has opportunities in terms of reading and cognitive load. I understand the problem of boring and wanting to achieve a more persuasive imprint but I don't think it is the best approach, or rather what makes me noise is that you relate the UX course that you are giving with this. I think the point you are attacking here has more to do with web design than with UX. I don't want to sound bad. It's just a simple feedback since I love your channel :)
I was pretty much going to leave this comment. I agree. This layout creates way too much overload for a visitor.
Well said. Looks like something a UI designer would re-do
Ya I get that as designers we should be creative but I also get annoyed with websites that are too creative. Just give me the information l need NOW
Always someone who parrots this view
Seems like bento style is popular nowadays
Form follow function... not the other way around.
How do I code this and responsively?
That's the neat part. You don't.
Baby problems? I saw you asked chat gpt a lot about that haha
Wife's lactation business
Well, yes, but the thing is, 90% of the traffic comes from mobile, and on mobile, everything is in portrait mode, one below the other. It's a bit of a waste of time to produce elaborate desktop websites - unfortunately. Of course, there are exceptions depending on the business, but they are just exceptions.
Congratulations on the baby?
ah yes, a fresh new reason for the developers on the team to hate me and a new way to lose users more quickly
The real designer must to learn creative layouts by himself, from experimenting, studying and pushing it's creative boundaries further. Otherwise u gonna stuck in one place, which means, u stopped growing as a designer. It's helpful when u see such tools, but to be honest, there is no easy way out to be good. Hard hard work is the solution to grow and become as a professional...
I agree. Unless you're copying other design pieces nothing replaces experimenting.
Responsive left the chat💀
It looks like a mess tbh
Gary, is chatgpt4/plus worth over the free counterpart? Does it provide better unique copy, better ideation etc that reflect its value?
Which counterpart are you talking about?
Gpt 3.5 over gpt 4?
in this case, i'd say gpt3 will do just fine for mock data. Only reason you'd go with 4 is for the updated data (i.e. you're trying to research something and need current data / events as reference)