Learn Responsive Web Design (Challenge)
Вставка
- Опубліковано 2 жов 2024
- bit.ly/3ReMZD0 👈 Learn UI/UX Today (Code: UI2024 for 25% off)
bit.ly/3yIAglK 👈 Watch the full UI/UX playlist.
-- Today, we're going to switch things up a bit and focus on a new topic: responsive web design. Making your designs adapt to various devices is critical, and it's what we'll be doing in today's video -- along with a challenge!
IMPORTANT: Make sure to submit your challenge by 1PM EST today (6/14/24) for a chance at being reviewed.
The Figma Community File (Open this to access the design):
www.figma.com/...
SUBMISSION Instructions:
1. Open the Figma community file above.
2. Watch the entire video.
3. Open the "Lesson 4 - Responsive Design Challenge" page and complete the design based on the requirements outlined at 17:55
4. In Figma, click "Share" and click "Copy link".
5. Visit x.com and paste the link into a new comment, and share it with the hashtag #30daysuiux -- Also, mention me / follow me if you wish: x.com/designco...
That's it! One entry per person.
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: 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 Designcourse.com.
Come to my discord server or add me on social media and say Hi!
Remember, submit your entry by 1pm est today for a chance at being reviewed! Submission details are in the description.
1. more on cards design section.
2. text layout section challenge(if there are only two or three paragraphs, with no image, how can we make it look good)
3.how to put image and what should be the background section color and side text color to make this section look good with selected image. i.e. pictures like corporate or profile pictures.
man you really buffed up compared to the last time I watched your video, but that hair's gotta go
Hey man you can select the button or any group of elements and press K to scale it down, instead of seperatelly reducing the size of text and the container
How many keyboards did you crush with those biceps?
Funny you ask, I recently dropped my wireless keyboard and had to buy a new one. I am going to break my broken keyboard in half in one of these future videos.. You know, something like, "Stop BREAKING your layouts!" while I split it in half over my knee? yaaaa???
@@DesignCourse Make sure that it doesn't have an aluminum body or a steel plate inside 😁
Why some brand icons are not copied/visible in the tablet variations?
Malmsteen of course :)
here for an another challange, lets go!
Malmsteen of course! Heheehhe great vid.
Malmsteen who??!!!
thank you for the free education
Is there a video on coding a responsive site for desktop, tablets and mobile?
FIRST!!
You don't need muscles to explain design.😁
Awesome stuff
let's go!
Why do all the designers say that pages should look good on all devices, but never design for smart TVs or smart watches? 2800px
Good point! Same concepts still apply. But then again, not every website or app must work on smart watches.
"Look good on all Desktop and mobile devices"
@@adebayoaladetimi2874 this is not true... Are you viewing your site on an Iphone 5 on old Safari? These mobile phones are used in a poor countries
Yngwie have no ego.
Hilarious!
Yes we get you lift weights but you're no Arnie ffs. Stick to what you do best and wear a jumper.
I'm too lazy. I wore that to the gym right after shooting the video. I'm a skinny muscleless punk, but I don't care.
You look good bro, the guy above is just jealous.
You're projecting so hard bro holy hell sht up go touch grass
This is a pretty bad tutorial in my opinion. This is so much easier when you use auto layout instead of this manual placing and scaling. Not sure why you would teach people like this.
I had the same feeling. As a self-taught UX designer, I struggle with adopting best practices in responsiveness, and I find the variety of resources available quite confusing. Properly done responsiveness is a big deal for a UX and effective collaboration with developers in the end. I'm wondering if there are specific principles to follow rather than manually adjusting elements. For example, should there be standardized font sizes for different screens and an auto-layout system that ensures appropriate, adjusted white space and button sizes, breaking points...?
While it's possible to do the job manually like this, I'm curious if this approach is considered professional, especially for someone with more experience.
Or, is he just doing this for demonstration/challenge purposes and is actually expected to handle it differently?🤔😂
Help! 😂
@@adric1111 Not sure why he is doing it like this. When working at a medium size company or bigger, you usually have a clear design system with documentation which sets out the best practices for things like typography, sizing, margins, grids, components, accessibility etc.
A really good design system also describes behavior for all of this on different devices, even providing specific components for different viewports WITH auto layout. I've worked on multiple design systems myself and having this in place gives the designers more time to do research, ideate and spend less time outside of figma. If you do need to create great interfaces in the end, the design system makes this so much easier. That's also why I don't like these types of videos. Too much focus on UI, not enough on the more broad work of a UX'er. But I can understand it since this specific video is about web design 😊
If you don't have these at your disposal, I would advice you to look at "open source" design systems like HPE, HIG (apple), Material (Google) or the lightning design system from Salesforce. They give you a solid base to create your own design system for your brand.
And yes, if you ask me, what he is showing isn't really professional. I mean the general guidelines he is explaining are correct (like scaling down for smaller viewports) but the actual design work is not good. If you are solo on the job without any other designers you can probably get away with it but any serious company won't think this is a professional way of working 😉
The same reason you learn to do addition or multiplication manually instead of just learning to press buttons on a calculator. Its about learning how decisions are made, how processes work, how to think deeper.. it's not about making it easier, it's about making you better by building a mental model of the concept you are working with.
Plus the tutorial is clearly building the fundamentals and for beginners, if you're an expert or pro this is just to get another designer/developers perspective, valuable in all cases.
@@brandonscott3012 What a weird remark. You really think using auto layout or not changes this?
Not sure why you have to be an expert to use auto layout to create good designs. The fact that nobody, instead fifth graders, use calculators goes to show your example doesn't add up (no pun intended).
Why do something more difficult if doing it easy (and more consistent and less prone to errors) is not that more work. Teaching the basics doesn't have anything to do with using auto layout or not.
@@NintendoFreakify The difference is the connections you build in your brain. Believe what you want. I don't care. Just answering your question of why learn it the hard way.