Hot answers tagged

8 votes
Accepted

What's the width to mockup websites for desktop and mobile now?

The short answer is: there is none. If you want your website to be prepared for use in the wide, wild world, you should keep any screen width between, say, 480 and 4800px in mind. Modern designers ...
user avatar
  • 24.3k
6 votes
Accepted

How can I achieve consistent colours in my app on different mobile displays?

Not all displays are equal. This is a problem in the desktop world, too. I got shiny new monitors last year, and looking at some of my old work now emphasizes just how poorly calibrated my monitors ...
user avatar
  • 488
6 votes
Accepted

Exporting multiple sizes in sketch. Saving it as defaults?

Well, I programmed a script for doing this. It's pretty simple: 1 - Select a layer and then,( CMD + Shift + A ) and automatically generates this: So you can export the layers really fast. This is ...
user avatar
  • 221
6 votes

Responsive web design is based on screen resolution or screen size?

Responsive design is based on neither screen resolution nor screen size. Instead, responsive design is based on the content and how it's made which allows it to fit all sizes and resolutions. The ...
user avatar
  • 12.8k
5 votes

How can I test the responsiveness of my non-hosted website on my phone?

Most web designers or developers have their own web site which has hosting. You can simply create a subfolder on your hosting account and drop the web site into that... and access it via http://www....
user avatar
  • 196k
5 votes
Accepted

Illustrator Artboard dimensions for mobile ui design?

My recommendation: create an Illustrator document using the "Web" profile, to ensure that "Align New Objects to Pixel Grid" is on. That way when you place new shapes onto any artboard, they are pixel-...
user avatar
  • 131
5 votes
Accepted

Critique: How can I tie a logo into my website design at both mobile and desktop screen sizes?

Simplest answer: I don't think the logo looks terrible sitting above everything as it is. Simple answer: You could try floating the logo to the left at large and above and moving the menu up to fill ...
user avatar
  • 16.2k
5 votes

Centered title but left aligned text to fill up content

The empty impression is caused by the image not the text. Take imdb.com as an example and look how they fill all the box with the image. For me the way to go is left aligned text for readability and ...
user avatar
4 votes
Accepted

How can I improve colors in my smartphone 2D game?

I think your example for why you used the darker colour in the foreground is showing much more distance than your game needs to. That's why it works so well for the mountains but not so much for the ...
user avatar
  • 2,906
4 votes
Accepted

Correct usage of the Apple App Store Badge

I believe you can only use the official badge. See the App Store Marketing Guidelines: Use only the App Store badge artwork provided by Apple. Do not modify, angle, animate, rotate, or tilt ...
user avatar
  • 26.1k
4 votes
Accepted

Mobile Phone Design - Data Tables

The common way to show data on a phone is reorder all the data from columns to rows. You can find several libraries to do that, just search for "responsive tables". For example "reflow" Table: ...
user avatar
4 votes
Accepted

How to convince partner that logo shouldn't be on top of every window

When disagreeing with coworkers on a design issue, I've found that it's usually a valuable exercise to bring other non-biased parties in present them with all the background information and why you ...
user avatar
4 votes
Accepted

Sync up photoshop canvas with mobile screen?

There are a couple of different options Skala Preview - Works only on Mac, mobile app works for iOS or Android A short description from their website Skala Preview sends lossless, colour accurate ...
user avatar
  • 12.7k
4 votes

Responsive web design is based on screen resolution or screen size?

Great question indeed! My confusing long answer: None and both Just some thoughts here commenting a bit the contradictions we are facing today. The technology is not what it should have being since ...
user avatar
  • 33.2k
4 votes
Accepted

Responsive web design is based on screen resolution or screen size?

First, thank you all for the answers and precious guidelines, it sure helped! Allow me to add my conclusion: Practically, targeting mobile screen resolution is not a good UX, the resolution is too ...
user avatar
4 votes

Why @2x Mockups

what's the difference between a 360ppi mock vs a 72ppi mock When talking about screen mock-ups, absolutely nothing. The only thing that matters is pixel dimensions. As for your concerns, non of ...
user avatar
  • 49.8k
4 votes

Where are the light sources located in Material design?

It is actually 45 degrees altitude and 90 degrees angle. You can see it in the video @Cagrigk posted. (this is the link with the exact timing). These images posted in Material design: The ...
user avatar
  • 346
4 votes

Which Adobe tools are most appropriate to make App Store icons, and images?

It's not about the tools I have some bad news for you I'm afraid. The tools won't help you. You can dismiss Dreamweaver immediately since that isn't a design tool (in any reasonable sense of the ...
user avatar
  • 8,418
4 votes
Accepted

How do I create a rectangle with rounded circle incision in Sketch?

Paste your screenshot onto your Sketch canvas/artboard and lock the layer (option-click the the eye next to the layer name). Create a rectangle and circle that match the rectangle and circle in your ...
user avatar
  • 373
3 votes

Has anyone used Blender for prototyping animations of mobile apps?

3D Applications, like Blender, Maya, Modo etc. are as good as After Effects for mocking up things like this. Perhaps better in some regard, although typography is typically easier in After Effects. 2 ...
user avatar
  • 55k
3 votes
Accepted

Font size on iOS7 looks different from Photoshop even with same resolution

For points in Photoshop to match points for iOS and OS X native development, you’ll need the document’s DPI to be: For a 1× document (non-Retina), use 72DPI. For a 2× document (Retina), use 144DPI. ...
user avatar
3 votes

Most efficient way to adapt current mockups to different devices and resolutions

Think in terms of templates Chances are, you don't have 90 totally unique pages (if you do, you probably have another problem on your hands) For most apps (or sites) you have a handful of templates ...
user avatar
  • 17.4k
3 votes

Sizes and dpi confusion

Here's the best explanation I've read on what DPI actually means:. The short version: If you change the DPI of an image it has no effect on the quality of that image. DPI is only relevant in the ...
user avatar
3 votes
Accepted

Are iPhone apps based on a grid?

apple is a little less " holding your hand" guide: https://developer.apple.com/app-store/review/guidelines/ there are however sizes for the icon and screen dimensions to be considered: https://...
user avatar
3 votes

Responsive design: Mobile first/only

I think you're misunderstanding how designing for mobile compares to designing for desktop. Luke Wroblewski described the difference best in his post "Organizing Mobile": "[Simply] porting over ...
user avatar
3 votes
Accepted

Why PSD design ppi matters on iOS, but not on Android?

Assuming the same pixel dimensions, PPI (or DPI, but it really is PPI) makes no difference at all. A 100x100 pixel image at 72PPI is exactly the same as a 100x100 pixel image at 300PPI. No difference ...
user avatar
  • 39.9k
3 votes
Accepted

Mythology/ancient mobile-design do's and don'ts?

Skeumorphism is "outmoded", but that does not mean there aren't situations where it's not appropriate to use it. If you search for apps and games with a mythological theme, you'll see that there's a ...
user avatar
  • 7,136
3 votes

Mythology/ancient mobile-design do's and don'ts?

I think the do and do nots are, do it atractive and usable, and do not make it unatractive and usless. In my opinion you have it easy. Greek clasic decoration on vases for example have a timeless ...
user avatar
  • 33.2k
3 votes

Design critique on my apps menu

Your design looks nice an clean which is an excellent start. However, you don't seem to have a cohesive grid structure and the horizontal menu doesn't work. You don't have a defined center or equal ...
user avatar
  • 5,128
2 votes
Accepted

What wireframing tool can I use that is focused on Android and iOS design?

There are extensions you can use for Balsamiq that will help you design wireframes for Android and iOS. For example: MockupsToGo is a user-contributed collection of ready-to-use UI components ...
user avatar
  • 26.1k

Only top scored, non community-wiki answers of a minimum length are eligible