6

Traditionally for UI designs, we usually do the mockups and UI layouts in Photoshop, then give it to the programmers. The UI would usually be 1920 x 1080 or 1024 x 768 or other common resolutions.

However, due to the increasing number of devices and varying screen resolutions nowadays, do UI designers still create different UI layouts for each of the device? Like say, do one UI mockup in Photoshop for monitor screens, then one for iPhone 6S, one for Samsungs, one for laptops....... Meaning you end up with probably a dozen or 20 Photoshop UI mock-ups for just 1 web page alone.

Since the screen width for phones are narrow, we also have to design for how it will look in such scenarios? Or do we just design one UI for the desktop monitor and the programmer "will figure out the rest"?

I'm a bit curious about the workflow for this issue.

Improve this question
2
  • I assume that in this case mockups refers to sample styles of a real look-and-feel rather than mockups of screen functionality as done in wireframe tools like Balsamiq?
    – Lilienthal
    Jan 30, 2015 at 10:19
  • Yup, sample styles of a real look-and-feel. :-)
    – Xeon
    Jan 31, 2015 at 9:01

2 Answers 2

Reset to default
9

The world of screen sizes and resolutions are is a world of chaos. We could try to design for different devices ending up with many mockups, but it wouldn’t do any good. Instead, we try to design against a grid system only dependent of the width. The boundaries will change over time, but the general thought is to design for three different layouts: Desktop, Tablet and Mobile. Because of that, we only need three mockups towards these screen widths.

enter image description here

Source: http://www.designfollow.com/

That said, we cannot be sure that I tablet design won’t be displayed in a bigger smartphone, but that doesn’t really matter. If we’ve designed our mockups, wireframes correct and the front-end developer have implemented it accordingly, than we have actually reached the goal: Deliver the content in a structured, correct rendered way.

Improve this answer
6
  • 1
    exactly what I would've wrote. typically only 3 mocks needed.
    – Dave Haigh
    Jan 30, 2015 at 9:18
  • 1
    We do this too: small, medium, large, minor tweaks for each one, that's it.
    – Alex
    Jan 30, 2015 at 12:24
  • "Desk tops" - almost like "Tab lets" or "Net books"
    – user11153
    Jan 30, 2015 at 15:30
  • Tks for all the advice, guys.
    – Xeon
    Jan 31, 2015 at 9:41
  • @Xeon Glad I could help :-)
    – Benny Skogberg
    Jan 31, 2015 at 9:42
5

If you're designing 20 variations of the same interface, something has gone wrong.

To be honest, I think it is a little bit of a myth that designers are increasingly having to redesign their layout because the size of screens has grown. The number of devices sure has grown, but layouts for different size screens has always been an issue.

What my workflow is, I talk with the stakeholders and examine who my users are going to be. If they a primarily mobile users for example, then I know my primary interface will be mobile, so that should be considered. (Desktop is also considered, but it is not primary)

After this I will chat to the developers and discuss what front end framework we will be using (if any) and base my initial mockups on the grid system used by that framework.

Once we know who users are, the project limitations and the technologies being used, we can better design the interface to meet the primary needs of our core audience.

Of course there will be times when we have to design more than one variation of the same interface, but knowing how layouts, grids and technology impact an interface, I have cut down the need to produce many designs.

My most recent project used a base 960 grid, and had maximum width of 1160. We also tailored the interface for screen widths smaller than 640.

Hope that helps!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.