7

Transitioning from web to mobile design

over 8 years ago from

Hey all!

I'm a web developer and designer who has a massive interest to mobile design, but has no idea where to start. I'm pretty comfortable with designing for web, but when I try to create something mobile related, it just looks simply awful. Feels so hard to design for such a small screen.

So if anyone, who has made a similar transition would have any tips or tricks for people like me, I would really appreciate it.

Cheers,

Aleksi.

9 comments

  • Evan DinsmoreEvan Dinsmore, over 8 years ago (edited over 8 years ago )

    Assuming you mean native mobile, not mobile web:

    1. Pick a platform. It's hard to learn mobile in general when different patterns are used all over. Pick one, learn one, and expand from there.

    2. Read the platform guidelines. Google's Material Design, or Apple's Human Interface Guidelines, or whatever applies to the platform you chose. Take mental note of common patterns, common aesthetics, or anything else that makes it feel like that platform and not web. If there's an update to the OS, look at anything that's new/changed in the guidelines. Re-read everything or reference during the design process if you need to.

    3. Download and use as many apps as you can. The top apps of each category. Free apps. Paid apps. ALL THE APPS This helps you see what designers have done to keep within the guidelines, or when they've broken them. And, if you're actually using the apps, you'll form an opinion about whether those approaches were successful or not. Take mental note of apps that feel like they were meant for the platform and aspire to design similar things. Take mental note of apps that feel like they weren't meant for the platform and try to understand why to avoid making those mistakes. Take mental note of any patterns that were not in the guidelines, but maybe used commonly throughout third-party apps, and try to think about whether or not it's a good approach or what the alternatives might be. Take mental note of anything that urks you and avoid doing it. Take mental note of anything that brings you delight, and strive for that feeling. This step is ongoing. Platforms and patterns change and get innovated upon, stay up-to-date as you would with web technology.

    4. Do work. Do a lot of work. Early designs might suck. Look at them against the guidelines and the apps you took mental note of and try to understand why, then iterate. Eventually you'll have something you're happy with.

    5. Repeat the process for the next platform you want to learn.

    Hope that helps :)

    7 points
  • Joe Blau, over 8 years ago (edited over 8 years ago )
    1. Pick a platform (iOS or Android). Each one has plusses and minuses so make sure that the platforms philosophy aligns with your design goals.
    2. Read the design guidelines for whichever platform you choose.
    3. Understand that mobile apps are highly focused. On the web your application can have a lot of features. The most successful mobile applications do 1-3 things really well.
    4. Find local community Meetups in your area that are focused on mobile application design/development for which ever platform you chose.
    5. Remember that mobile devices are far more powerful and personal than a web browser. You have access to a lot more sensory input and output which you can use to create user experiences that you can't create on the web. (touch gestures like pinch to zoom, push notifications on activity changes, or location based decisions)
    6. You can checkout these Pinboards that I'm curating if you want to take a look at some inspiration
    7. For iOS if you have a developer account (free) you can watch some of the WWDC videos on iOS design. Search for "Design" and watch those: https://developer.apple.com/videos/wwdc/2014/
    8. You're going to have to do a lot of work; You mentioned you're a developer so you could take a look at building a sample application to learn the challenges developers will face trying to implement your designs. A lot of web design elements that seem trivial, are quite frustrating on mobile for iOS particularly.
    9. Congrats on making the decision!
    2 points
  • Cihad TurhanCihad Turhan, over 8 years ago (edited over 8 years ago )

    I've been making a similar transition too. I started mobile design and development about 2+ months ago. Some things you might want to note

    • you have a limited space (~1/9 of a web page) so think wisely. Most of time you won't need header/footer.
    • get used to calculate with dpi. Learn all sizes for iOS and Android. If you need, I can send you a sketch file
    • personally I design at 1x because it's easier to upscale to 2x, 3x and 1.5x
    • even tough you design for iOS, you should consider how it will look on Android. In any time your company might want to release an Android version too.
    • You also need to design icons for both app and store. Make sure you know all these sizes
    • Learn limitations: You don't have css3 transitions and animations. It takes 20+ mins to create an animation on iOS which you can create in 5 mins with CSS. You can't change a navigation header so much. If you want to create a custom header, it will put a weight on the shoulder of the developer
    2 points
  • Dean HaydenDean Hayden, over 8 years ago

    May seem obvious but always check on a small device and consider those with fat fingers (mine are pretty small and svelte)

    1 point
  • Tyson KingsburyTyson Kingsbury, over 8 years ago (edited over 8 years ago )

    couldn't agree more with Alex who posted above (or below)...

    also, you might want to investigate 'card design'... it's sort of the 'in' thing right now, but if you look at alot of iOS and Android work, it's all sort of in that direction as well...

    simply put, card design is (at it's most basic) the idea of fitting your ideas into small card shaped items...

    generally speaking a lot of design comes down to problem solving and figuring out how to fit things, and sort them into the places they ought to go....UX UI sort of stuff.... card design is more or less that in a nutshell...

    I'm WAAAAAY over simplifying things here, but it's just to give you an idea of things to investigate to brush up on mobile design...

    also, and I'm sure someone will mention it...take a look at what's been done with Material Design (from google)...there's a lot there to absorb, and you don't have to copy it all verbatim etc...but alot of the ideas there are quite sound....

    1 point
  • Ale FracazoAle Fracazo, over 8 years ago

    Hello Aleksi, how are you? What really helps me in the begging was study everything related to the guidelines from iOS and Android. And start building something following those guidelines.

    1 point
  • Charlie McCullochCharlie McCulloch, over 8 years ago

    Some tips:

    • Design with fingers & thumbs in mind. Tap targets should be around 44p for iOS, 48dp for Android. This is the most common mistake I see with people starting out. Fingers are not precision pointers!

    • Good mobile interfaces tend to offer one set of related choices, or a single task, at a time. It's just not possible or desirable to squeeze the huge amount of info or choices on a common desktop site into the space available on mobile.

    • Scrolling is (cognitively) cheap. Give the content room to breathe and don't freak out about the fold, so long as items down there fit within the information context of the screen

    0 points