8
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 for responsive webdesigns (designs that adapt to the width of the viewport) work with ranges of widths. Each range has its own quirks to adapt the website to the ...
6
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 were at the time.
My advice is to just accept it as something you can't control and ensure that there is sufficient contrast between your colors so that it ...
6
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 the code inside the .sketchplugin file I created (Copy and Paste it into a empty textFile and save it like exportPlugin.sketchplugin
Here is the code-->
// (...
6
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 way you're thinking about responsive design is wrong. I assume you're coming from a more conventional print design background, yes? Designing for the web is much ...
5
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 the space.
Complicated answer: You could think more about an identity system. A logo is not a brand; it's just a part of it. Think of how Coca-Cola has their ...
5
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.yourdomain.com/subfolder. If you don't have a hosting account, get one. They run as little as $40 a year.
Other options include using things such as MAMP, LAMP, ...
5
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-perfect, and will look clean on export at 72dpi. Also, make sure you are in Pixel Preview mode when designing so you can align shapes to the pixels.
Edit: Yes ...
5
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 consistency and then playing with the sizes of containers and images depending on the proportions of each one. I would not recommend "tall and skinny" images.
4
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 buildings.
I would also mention that your background is darker at the top and lighter at the bottom. This depth would be complimented if your higher buildings ...
4
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 the App Store badge. Do
not use the Apple logo alone. Do not use icons, logos, or graphics
from www.apple.com to promote your app. Do not refer to iOS in your
...
4
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: Reflow
And just for a reference , you can also read this:
10+ Solutions for Responsive Data Tables
Regarding the different platforms, yes, you should stick to them ...
4
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 both believe your solution is best, then ask their opinion. They may be other coworkers, or other designers. The key is to be open to the groups opinions and let ...
4
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 image previews to any
iOS or Android device. Previews are pixel perfect. Colours are
identical to how the final app or website will look on the device.
...
4
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 ages.
We all should be designing based on real life units (or percived size), with some degree of flexibility and freedom to let the user do some aditional ...
4
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 high for the small screen, fonts will be too small to read, icons will be too small to click, etc.
So, it's better to make the design based on the actual viewport ...
4
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 them are really all that much of an issue for a team of designers and developers that understand the process.
Very large file sizes
Hard drives are cheap. :)
...
4
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 word) it's a code editor.
That leaves you with two industry standard design packages, Photoshop and Illustrator. Either of these could be used to create logos (...
4
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 example (ignoring the curved notches for now.
Select both shapes/layers and combine them using Layer > Combine > Union.
Now flatten the combined shape using ...
3
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 dimensionality is after all just a subset of 3D. Slap in a orthographic camera and you are set
You may need to work on the workflow a bit upfront. So saving ...
3
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.
For a 3× document (Retina HD), use 216DPI.
Document DPI typically doesn’t matter (it’s pixel dimensions that matter), except when talking about points. Points ...
3
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 that are capable of setting up the central elements of the interface.
Start with the views
You've put a ton of work into creating these 90 views, so you probably ...
3
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 context of an output device like a printer. On screens, it has no effect.
A 1,000×1,000 pixel image file will have the same quality and amount of information ...
3
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://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
in x code all designs are assembled in the xib area/ main ...
3
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 what worked for you on the desktop to mobile often doesn’t make sense. Instead, you need to think about what mobile is uniquely good at and align it with the ...
3
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 at all.
All that PPI value is is a meta tag describing what physical dimensions the image should be. If you are printing your image it matters because it ...
3
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 following example shows the card with a height of 6dp.
Which implies a conversion of 12px:
xhdpi (2x) @ 6.00dp = 12.00px
So the card real size is 320*320px ...
3
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 lot of skeuomorphism going on. But there is plenty of ways to give that feel that don't necessarily involve it:
Typography- find a font that evokes the era you ...
3
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 style. It is abstract, it is well defined, it is... flat! you can adapt it quite well. Greek vase
Here is the adaptation that Disney made for the Hercules movie
...
3
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 padding on the sides.
I wireframed your app out and laid out the current grid lines.
As it stands now you have a hamburger menu opening top -> down which is ...
2
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 and design patterns built using Balsamiq Mockups. New
patterns are added all the time - we hope you'll want to contribute as
well!
In particular, here are ...
Only top voted, non community-wiki answers of a minimum length are eligible