Tag Info

Hot answers tagged

12

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 ...


6

If you can't think of any "etc..." then its possible you don't need any "etc..." in there. We seem to have an in built reaction to fill our graphics so they don't look empty. It takes guts to push out a design that looks simple (even if its not). Something i learnt at design school was to embrace negative-space/white-space/void and to resist the urge to ...


5

Hey Check this links might they help you for your icons... android App Developer Gui icons Fonts ETC Free android Icon pack Free Icons For Android Developers 350+ free and fresh icons for android I don't know you need this or not but i am posting it for every android user . The easiest way to create android icons (inkscape) All Tutorials for ...


4

IcoFX is a free package for creating and editing icons. It works very well in Windows and can also save to 'Macintosh' format; so I'm not sure how well it would work for OS X (I'm not a Mac user). I've been using it with all my Windows stuff for a couple of years now, and have not found it lacking any important features. EDIT: As pointed out in the ...


4

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 ...


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 ...


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

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

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

Apple's HIG make clear that they would prefer you simply show the default interface devoid of any content. But that really doesn't work well with applications with completely custom interfaces like games. Just about every application I have ever seen ignores this rule. Things to keep in mind is that splashscreens are that they... Cannot be modified ...


3

If you are looking for something that helps you with the guidelines, this is a useful tool based on a Google Project: http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html It does everything in automatic so I would not recommend it ;)


3

You can find a template pack here: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html as well as some pretty thorough guidelines for developing icons for the Droid. I would assume that anyone who could do web / graphic work could make icons for the Droid (it looks like they range from 19 x 19 px to 72 x 72 px). I don't know if ...


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 ...


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 ...


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 ...


3

I've found the iOS specifications in one single page, it's hard to find all resolutions in one single place, because the list is growing up everyday, and some of them becomes obsoletes soon, but fortunately that information is not hard to accomplish, as soon as you need to now one, is just a Google search far from you, and you could create your own list with ...


3

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 ...


2

iPhone 4+ is called 'retina' display. It, indeed, has twice the pixels, but it's not usually a concern for the designer other than, if they so choose, they can provide those with retina displays higher resolution images to give it a crisper look. Apple was smart and pretty much treats the retina display like the standard display in terms of rendering web ...


2

GENERALLY for electronic use, what matters is the pixel dimensions of the item, and inches don't really exist. So while the iPad's rendering libraries might work off of inches instead of pixels (which I doubt), my recommendation is to select the setting which results in a PNG that meets the pixel dimension specification for your application. If you export a ...


2

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.


2

The best way? Use Photoshop (preferred) or Fireworks. Draw everything using vector shapes. Use Layer Styles for additional effects. Lay all the elements you need out flat, and use Slices to save the PNGs required. There's quite a few questions on graphicdesign.stackexchange.com on the topic. A search might help you out.


2

It sounds like you wish to export the PNGs yourself? If that's the case, I'd highly recommend getting a Photoshop document (.psd) that is built only using vector shapes and layer styles, because these can scale non-destructively up and down with the document. You'll want to do your best to avoid bitmap layers, because bitmap scaling introduces artefacts ...


2

There isn't any way to actually make a desktop display appear to have smaller pixel density. That is what you are asking about I think. Otherwise you would just minimize your browser or zoom out, depending on your approach. You could stand twice as far away I guess. However, If you have a Mac with a retina display, you can zoom it in double and then see ...


2

Textures are typically some kind of noise or bitmap. There's a variety of ways to achieve the effect in Photoshop, Illustrator and using CSS. If you want to keep things to CSS as much as possible, then you'll probably still have to use a bitmap images and use the background-image (or background) property as part of your element style. The texture image may ...


2

DPI is irrelevant. Ignore that. All that matters is pixel dimensions. Make sure you are making them at the dimension they will be used. Ie, if it's going to be 30px x 30px on the iPhone, make your image 30px x 30px. For retina, you'll want to make a second version at 60px x 60px. PNG files are fine. But use whatever makes sense for your particular needs. ...


2

This is the most thorough piece of information I've found online. There are other similar resources that can assist with the design of your own elements, but this one covers the nuts and bolts of what exists and how it renders: http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/


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 ...


1

It depends on all sorts of things. Personality is often the big one, followed by the quality of their resume/portfolio. Beyond that, how big is your team? Will this be a one person UI/UX person or is there a bigger group? Do you need the UI person to design? Develop? Both? User test? Software test? etc. It's really all going to depend on the specifics of ...


1

When creating a non native app then you need to be very careful about including elements from another OS into the one that you've released on. For instance, if you're releasing on Android and iOS then don't incorporate elements from either.If Apple see an Android look-a-like app they won't approve it and if Google find and iOS look-a-like then you'll ...



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