Video Tutorial: Designing for Mobile

Key Principles for Mobile-First Web Design

Explore the challenging realm of mobile-optimized design and understand how to navigate the changes brought on by an increasingly mobile-centric user base. This seminar delves into the impact of mobile on logo design, navigation, responsive web design, emails, graphics and app icons.

Key Insights

  • The rise of mobile usage has significantly impacted logo design and navigation, necessitating an optimized design for small screens.
  • Mobile navigation presents unique challenges and requires careful consideration of user experience and content flow.
  • Responsive web design allows a website to adapt across different screen sizes, with the 'Mobile First' approach placing emphasis on designing for mobile devices from the onset.
  • Emails can also be responsive, although this comes with certain limitations and considerations.
  • Creation of graphics and designs for mobile require specific resolutions and sizes, and should take into account factors such as hi-res displays, minimum button sizes, and font considerations.
  • App icon guidelines provide important information on common icon sizes for iOS and Android, as well as templates for automating icon creation.

Mobile Design Topics

  • Mobile-First Logo & Navigation

    Pros and cons of different mobile nav styles; small-screen logo strategies.

  • Responsive Web Design

    One codebase that adapts across mobile, tablet, desktop.

  • Mobile-First Process

    Improve designs by starting from the smallest screen, not the largest.

  • Hi-Res & Tappable Targets

    Resolution choices for Retina/HiDPI plus minimum button sizes for fingers.

It’s no secret that mobile devices have changed the computing landscape. An increasing number of people are browsing websites on smartphones and tablets, so they need to be mobile-optimized. People are also using native apps specifically designed for smartphones and tablets. With these new devices come new design challenges that we’ll discuss in this seminar.

Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

Watch this free 2-hour seminar so you can become a better designer. Here are some topics we’ll talk about:

  • How Mobile is Affecting Logo Design
  • Navigation
    • Small screens can be challenging. We’ll talk about and show examples of various styles of mobile navigation.
    • Pros and cons of different types of mobile navigation.
    • User experience and content flow. Considering what your users need, so they have a great experience.
  • Responsive Web Design
    • A responsive website adapts itself across different size screens (mobile, tablet, desktop, etc.). Unlike separate mobile and desktop sites, a responsive website uses a single codebase that adapts to any size screen.
    • Mobile First: Improve your designs by focusing on mobile devices first, instead of treating them as an afterthought once you’ve designed the desktop site.
    • Designing flexible content that can work across devices.
  • Emails
    • Emails can be responsive too!
    • How much can you do?
    • What do you need to keep in mind?
  • How Do I Create My Graphics/Designs?
    • What resolution & size should you work at?
    • How to design for hi-res displays (Retina or HiDPI).
    • Minimum button sizes that are ideal for tappable items.
    • Previewing your designs live on devices while you work!
    • Font considerations. How mobile fonts affect overall identity and print designs!
  • Guidelines for App Icons
    • Common icon sizes for iOS & Android
    • Templates for automating icon creation

Topics

Learn more in these courses

Back to Blog
Yelp Facebook LinkedIn YouTube Twitter Instagram