18
Android icons (and other UI elements, like drag lengths) are measured in dp. A dp is a device/density-independent pixel. 1 dp is equivalent to 1 px on a 160 dpi screen. But to convert to other screen densities, you need to multiply it by a density factor. So it's generally recommended that multiple images are supplied for most icons.
For example, the ...
7
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
If you want your photoshop to match the pixels on the Kindle, then your PSD file should be 1024x600 pixels. DPI is a measurement of the pixel density on the device itself and has no real bearing on your PSD file.
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
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 ...
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
It looks like some noise with lines to me. While I didn't match it perfectly, this seems pretty close. Left = original, right = my version.
Step 1: Fill and noise.
Fill with a dark grey, chosen from the original, then add some noise (Filter > Noise > Add Noise). You only need a few percent of noise, and monochrome noise is probably best for something like ...
4
There is a huge myriad of resolutions for different devices (this is a good cheatsheet for iOS), but you are in the right track.
The 'real' resolution is, as you pointed out, 1024 x 768 pixels. But when you are preparing the materials to send to the developers, you need to design with retina in mind. This means, all your graphics need to be either scalable ...
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
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
On http://jquerymobile.com/resources/ there is a listing including a link to the icon author's website and the actual files can be found as a zip download on github. Even though there is a .eps file in the assets folder, the icons in the .psd file seem rasterized.
Maybe contacting the author directly would be a possiblity, if you really need the vector ...
3
You'll have to decide if you want that person to really be a UI designer or if you want them to develop the code as well.
In my experience, it's best to have someone focused on the customer side of UI/UX who works closely with a true UI developer to make the magic happen. Two people are definitely stronger than one in this role.
If it's a visual/...
3
There are a lot of considerations when working with the mockup so it's really best if you ask the designer his/her intentions. If you have reasonably decent Photoshop/GIMP/MSPAINT skills you can hack up a flat image and make elements for your app. BUT... there's always a but... you need more knowledge than just the static mockup. Should certain elements ...
3
If he uses the native resolution for the smartphone (960x640 for iPhone retina) and
if he uses layers to separate the individual items, it should work.
So he should use PS or Pixelmator or any other application which can handle layers and he must send it to you in a usable file format like .psd or .tiff
3
Nothing should happen. The iphone 4 has a higher pitch screen but doesn't usually effect the number of pixels in an image/UI however I would think using high res UI design would slow down the iPhone 3. the best way to check is design a background image or UI element and see how they look on each iphone.
3
It's a web app. You don't pretend it's not. The general standards apply to most all touch devices (touch areas, relative screen sizes, etc.) but don't try and use actual native UI elements from either device as that's somewhat deceiving (it's not a native app) or just confusing (the UI isn't that of the device you are on).
As for a system message popup, ...
3
I would do it like this:
Make a new layer.
Make a Black line with Line Tool in that layer. Put Fill Pixels setting on
so you can deselect anti-aliasing.
Go to that layers Blending Options.
Add Drop Shadow Blend Mode:
Overlay.
Color: White.
Angle: 180 or 0.
Distance: 1px.
Spread: 0%. Size: 0px.
Noise: 0px.
Make sure that "Layer knocks out drop shadow" ...
3
Create a green background
Draw the 2 lines with line tool
Double-click on the line layer
Apply bevel emboss > pillow emboss (select from dropdown)
Rasterize both line layers
Select marquee tool > fade from top > and then delete the bottom part of the line layer, apply this on both layers
You can follow these screenshots, I tried to explain this as easy/...
3
Pen and paper. Can't beat it. Cheap, easy, effective. Incredibly fast. Just like they teach you in design school, you should be doing dozens, potentially hundreds of sketches to fully hash out an idea. It's an easy way to explore countless variations of an idea, even ones that you might have second guessed when used software. No need for producing "sketchy ...
Only top voted, non community-wiki answers of a minimum length are eligible
