UI/UX - Should you start with Mobile or Desktop Design FIRST?
Вставка
- Опубліковано 4 чер 2024
- bit.ly/3ROaYX8 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to discuss my personal approach towards designing layouts in the context of which device I start with -- Mobile or Desktop!? Let me know what you do, and if you disagree with anything I've said in the comments below!
0:00 - Introduction
0:47 - My answer
1:18 - Why though?
4:30 - Your thoughts?
Let's get started!
#uiux
- - - - - - - - - - - - - - - - - - - - - -
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! - Навчання та стиль
Let me know below. Do you design mobile first or desktop first when working in design apps? Also, do you code mobile or desktop first when you're working with HTML/CSS?
Sir What do you do first when you code a design? Mobile first or desktop first
I have done both. For me it's easier to start on larger screens so I have more room for creativity. Then I simplify and reduce elements on way down to small screen.
For me it's "Mobile thinking" while "Desktop designing". As soon as I finish the head section of the desktop version, I update the mobile layout immediately as I have them side-by-side too!
It all comes down to the business goals, personally I work from large screens to small screens.
The main rationale behind mobile first is that it forces you to think of the most essential content.
I always start with desktop first, but it depends on your industry. For ecommerce maybe consider mobile first. Either way you basically have to design all pages twice, to make sure they are optimized for mobile. It basically just comes down to the mobile elements having the right padding.
I start desktop first with designing
but implementing mobile first; makes cleaner CSS and the implementation from small to big is easier to manage with less breakpoint specific code
As a general rule: Take mobile screens into account (they're small; handicapped by default), but don't let the desktop usability suffer.
I think the exact opposite. 54% of the webs total traffic comes from mobile users and that number goes up every year.
Nice video. I think this answered one of my comments form a previous video of yours. Here's what I've noticed from years of being self taught and watching videos on youtube and reading articles and whatever else. Most people that to teach web development treat html/css and design as one topic. They don't separate the design aspect of web development. Most of the time their designing seems to take place at the same time they are coding. As you mentioned in your video, the coding part of development makes a lot of sense to go from mobile up. It's just tends to make easier cleaner code. However, from a design perspective, the more complex and complicated layout is the larger formats. That's the area you'll be spending the most time on as a designer. Therefore why not start there get everything looking perfect and then condense down. I personally believe there might be a hidden danger in starting from a mobile first mind set with your designs. I believe with a mobile first approach you run the risk of having a final desktop design that is empty and lacking substance because of how constrained your original design was. At that point you'd have to do more work as a designer to try and correct that issue or just settle for a less then desirable end result.
i always start by figuring out the project requirements - I think you have to take a look at what is happening with the user needs because they may not be a 1 to 1 experience / some experiences may be limited in the mobile so it would make sense to have a clear picture of where things are going
It all depends on the targeted industry. Usually, for the UI design stage, I start with a desktop-first approach. I design the different screen sizes and do a mobile-first approach in coding.
Thank you Mr. Gary this is good content I think this is the way forward
I was asking myself this exact question lately. This is really useful because I thought mobile first was the norm and I realize that both are fine. Thanks!
Same exact thing with me.
I agree it feels intuitive to first build your design in desktop format because of the width helps creatively to have a larger canvas and once you have a good mockup then you can simplify the design for mobile.. of course do what feels good or natural to you. this makes a lot of sense to me ! 🙏🏼
Thank you, you are helping very much.
Thanks for the video, very insightful
I totally agree with you! For me it's much easier designing desktop first and work my way down. Unless you are working on a mobile app.
This doubt is in everyones head !! Thanks for explain👍🏻
Totally agree with you!
I always design desktop first and code mobile first. The reasoning is very similar to yours. It's way easier to remove when designing and add when coding.
I'm not sure this is true on a general level, but for me personal - I have higher expectations when I enter a website from desktop. Then it make sense to design it for the full experience and then compromise as the screen get smaller.
Nice approach👌
a side note: if this a finished design, the second icon does not match the style of the other 2 which are outlined (this is one of the design principles i think you've mentioned at some point)
I'm also desktop first... It's just easier to work from the big picture down. Helps with the details.
Desktop first approach simplifies your job because it's easier to hide things on mobile as compared to adding things on desktop that just becomes cumbersome
I work in the same way. I find it a lot easier to design the desktop version and take things away. It's so much easier. Also since you're doing it on a wireframe level I don't see why it would have an incidence on the mobile version. If anything you have more time to think about what you'll do on mobile.
My old boss always told me to design section by section. The reason for that was because he would make websites using templates that he personalised. So he would take a template, design the hero section, then switch to smaller screens and so on. I mean it sort of works but I feel like this is a bad approach to webdesign. I wish I was taught to wireframe first and basic design principles.
So basically I applied for an internship, he hired me and threw me at the deep end. I was supposed to get sessions to at least be taught the basics etc. but he never had time and ended up giving me, his work load, even though I had no experience designing websites at all. I guess that's just the way it is and everyone went through a version of that at the beginning but it doesn't mean it's ok.
I'm new to your channel, I'd love to know if you have any online course on UI/UX I can register?
I love your style of teaching
I like developing desktop first, because the designs I’m given are designed for desktop. I’m almost never provided designs for smaller screens.
Do you always make few projects - mobile , tablet and desktop or only one for client?
In my small way, I think it is best in all cases to start from the desktop. Better to focus on a full screen and go down.
How does font scale from desktop to mobile
Content informs layout. Start with strategy, consider everything you need to include, order it appropriately. Desktop/mobile is barely even a factor.
Graphic design for desktop first, but be cognizant of how it looks on mobile. Then, code for a mobile default first, then desktop after.
I think you need to have in Minds it is poseble user go this way or this way Desktop or Mobil. E.g. all Business Sites like Software or lawyer Site
Where i can find this figma project?
I was just having a crisis 😭😭😭😭😭😭 Thank you so much!!
What app is that?
me too, in i'ved used desktop to smartphones view
Please read about Graceful Degradation & progressive enhancement it will clear your thoughts on mobile first design.
What about html and css?
It Depends, that's why empathizing is really important. You have to understand your audience, but nowadays phone users are more compared to desktop users so Progressive Enhancement will be good
Always mobile first! It's too tempting to put stuff that may not be necessary in a desktop design. Mobile first forces a focus on what it necessary - speeding up delivery and avoiding unnecessary features.
Hmmm, this is another approach to be noted. Thank you for this.
I work the same way.
I only just started my UI/UX journey back in March earlier this year. Started with desktop design first since i spend most of my time on a desktop/laptop screen rather than on mobile, but i'm only still learning so its assuring to know that a professional thinks this is the right approach as well. The idea is to get good at desktop view and work my way down to mobile.
when designing it is better to design desktop first, but development i prefer mobile first.
Your hairs are looking awesome 😍😎
I get more motivation building the desktop version first, I then work towards mobile.
I have the same mindset, should be desktop first down to mobile screen.
The term “mobile first” is often misunderstood. It never applied to design or to the ratio of mobile to desktop traffic a site receives. Mobile first is solely for the development of the site. Web elements almost entirely stack into a single column by default, which is usually how mobile sites are intended. If you want elements to flow side to side or really do anything other than stack you need to apply css. If we build desktop first, then we’re adding the css to achieve that layout, then later going back to write css that overrides the desktop css to get it back to its default state, which is a lot of extra and unnecessary work that can be difficult to maintain. As a designer, your approach to design desktop first is best. But as a developer, I need to wait for you to finish the mobile designs before it makes sense for me to start writing any html/css
that's right imo
What are the most common media Queries you use?
Your comment is a masterpiece of logic.
Just add your desktop css wrapped inside a min-width media query.
@@maximebeguin4346 Of course that's going to be the end result but until you have the mobile designs, you're just guessing at what the desktop specific styles are going to be. If you wait until you have the mobile designs it's just much easier to build mobile first. Sometimes you don't have a choice but I don't think it's wise to start writing css without client approved mobile designs. But taking a step back, "mobile first" doesn't even refer to which version you build first even though starting with mobile is easier. "Mobile first" is about setting your css to default to the mobile styles, then to add media queries to set the styles for desktop
I definitely prefer desktop first in development as well.
Neither, I do both at once
I think, i am like you 😅
I go mobile 1st or I get carried away on my big screens
54% of the web’s total traffic comes from mobile users and that number goes up every single year. Mobile first. Even a janky basic experience is still usable in a full browser, but an app that doesn’t scale to mobile devices can be totally unusable.
Mobile first. Because mobile designs work on desktop, while desktop designs are terrible in mobile. If I finish mobile first, the site works on all devices. If I finish on desktop first, it sucks for mobile.
At work though, I never do mobile first.
Mobile first.. All the way
totally agree. Mobile first was always BS. You just gotta think about mobile while doing the desktop
I laugh every time I see his hair lol
you laugh with joy and admiration, amirite?
@@DesignCourse I was just used to your short hair look. You look like a different person 😂
He looks like a 16th century lord
Desktop first it allows me to be creative as possible. Mobile is boring everything is reduced to one column so designing mobile first is counter intuitive and actually frustrates the design process. Mobile first purists make me sick. Go away.