Tag Info

Hot answers tagged

14

Ask yourself these questions: How many UI layouts/options can you explore in 30 minutes by coding? How many can you explore by sketching? How often do you get a UI design exactly right on the very first try? If not very often, how quick/easy is it to change a sketch versus a coded mockup? Can you instantly identify a color just by looking at its hex/rgb ...


9

Just use objects Guides are fine but I prefer lines and rectangles. I keep them isolated on their own layer for easy activation/deactivation. Smart guides will make it extra simple to snap to these objects. I set up my basic grid unit and position it in one corner of the layout. Then I use a Transform each to tile it out to a full grid. That is, if you're ...


7

Differentiating them based on color is a good idea. You could have the member icon in the club's color and have the visitor icon greyed out. But you might want to look at it from the other direction instead. Rather than changing the visitors icon to indicate that they lack certain privileges, change the members icon to indicate that they have extra ...


6

The visual flow of an interface does matter, and here's why: Every interface screen should have a primary action or actions that are to be performed. The visual flow should naturally draw the eye to the primary action. The less distance the eye has to travel, the easier an interface is to comprehend and use. Studies (pdf) on form design bear this out as ...


5

These types if Ui designs are commonly created using Adobe Illustrator and then brought into Adobe After Effects for creating the video portion of the elements making them appear "in use". I don't know that they have a particular term or designation in regards to a theme. They are in fact static short film clips and never truly functional UIs. Directors and ...


5

When you do photography you often reflect a Softbox (a square diffuser that makes the light more even) or an umbrella (also diffusing the light but gives a round reflection). When taking pictures of shiny objects these are often placed so they reflect in the object, together with white and black sheets of papers around setup to give a good 3D feel ...


5

I'd vote for "drawing" first. In GUI, proper layout/presentation is the key and it calls for visual means to be designed. Designing GUI visually lets you rapidly change your design without having to "imagine" each change, "translate it to code" and finally test it. The other way is also possible, but it's rarely better (e.g. project is extremely small, like ...


4

If you're using a designer, my first suggestion (as a designer!) is not to get involved in the technical intricacies, including terminology. Leverage the designer's experience and expertise and let her do her job. I often work with clients who don't have the terminology but do have an idea of what they're going for, and the design process usually iterates ...


4

This answer only deals with iOS and Android, Blackberry exceeds my knowledge Resolution In iOS you have three screen resolutions to consider 480*320 (iPhone3) 960*640 (iPhone4) 1024*768 (iPad) In Android there are 4 resolutions, to cover at least: xlarge for screens that are at least 960dp x 720dp large for screens that are at least 640dp x 480dp ...


4

As mopsyd mentioned, just stay away from high contrast between your foreground and background. High saturation colors should be used sparingly as well. They are best when used for critical action or navigation items. Despite the great scientific stats behind it, I think mopsyd's red recommendation is a bad idea: too much saturation. Working from that ...


4

I cannot speak outside of my own limited experience. I worked at a company that designed some of the GUIs for the U.S. Federal Aviation Administration (FAA) products. Actually, that's not quite true... we designed mock-ups used by our software. The final product was going to be shipped to the FAA, and their in-house designers were going to customize it from ...


4

Starting with WPF I personally work with a combination of Microsoft Visual Studio (environment) and Microsoft Expression Blend (elements editing). Blend is a WYSIWYG front-end for designing XAML-based interfaces for WPF and Silverlight applications, and it's good for templates, visual states, and animation. Editing Templates If you are working with ...


4

In a way, I think you have the cart in front of the horse. There is the old saying; if you take care of the pennies, the pounds take care of themselves. Of course, you need to be able to step back from details to see the whole now and again, but the devil is in the details. To quote the Master; da Vinci: Details make perfection, and perfection is not ...


4

I think you're looking at the question wrong. It's not a matter of "smaller things" or details being automatically more or less important than the broad aspects of colour and layout. It will always depend on the specific detail you're talking about. I think you get closer to the key issue when you ask Can they be useful in any and every situation to ...


4

As with everything, context is critical. If we're talking an emergency shut off valve at the gas pump, no, the 'little things' probably aren't important at all. Focus on the big thing "Make it obvious and large" is all you need. If, on the other hand, we're talking about differentiating a product in the marketplace, then it's pretty much entirely about the ...


3

Obviously it all depends on what these business goals are... but, there are a few principles in designing one-page call to action sites that are pretty universal and established through evidence. Since they have a clear goal, these types of sites are comparatively easy to test, particularly, with iterative A/B testing. (half users see one design, half see ...


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 many ways to tackle this I believe and you will have to choose based on your content and your audience. There have been studies on where people look first and what different audiences expect. Which is to me one of the most important factors. Of course, functionality plays into it as well. Will there be very deep submenues? Then it is often favored ...


3

Almost entirely the reflection from glass, or, shiny clear plastic. Imagine a smooth, curved physical glass/plastic button. Sometimes, people go to town and simulate caustics and refraction as well, but usually reflection, and a gradient and optional counter reflection (like at the bottom of the first image) suggesting light from the underside therefore ...


3

Approach this from the other direction. When you have both monitors up, take the time to set up your palettes so that they're perfect on the laptop screen, and save that as Laptop Workspace. Then when you switch to just the laptop, load that workspace, so you haven't lost any of your personal settings but you can see all the palettes.


3

Skeuomorph is perhaps the term you are looking for. Here's a discussion on UX: http://ux.stackexchange.com/questions/13449/what-are-some-examples-of-famous-effective-skeuomorph-uis/ I think it's an equally valid Graphic Design question as well. As an aside: I think knobs are one of the greatest physical UI elements out there. I also think it's the one ...


3

For UI design I have three stages with different objectives: Sketching. First, you want to get the basic idea down of what elements there will be and how they will fit together. Any fine detail or aesthetic perfectionism at this stage is a distraction. I use a whiteboard and fat erasable pen so it's impossible to get distracted by too much detail and easy ...


2

We need more information to fully understand what you are designing, but if I were to assume you are designing web sites, then yes, you can design for any device. That's pretty much my day job...design and develop a mobile web application that supports iOS, Android, BlackBerry and (groan) Symbian. In terms of visual design, each OS has it's own native ...


2

This question is a bit vague and, as such, as are the answers. On top of that, projects will vary wildly, as will teams. That said, there is no 'best'. It's about using all tools in a workflow that makes the most sense for you and your team. Generically speaking, I'd say this is the type of workflow you should aim for: Sketch. Pencil + paper. ...


2

Anything low on the spectrum, or a tone, shade, or slightly tint of a color low on the spectrum. Red is the lowest on the spectrum, which is why it is used in darkrooms, because it is too low on the spectrum to develop film. Warmer colors tend to have longer wavelengths, and hence be lower on the visible spectrum because individual light waves hit your eye ...


2

I found Tapworthy by Josh Clark to be really helpful in understanding why most iOS interfaces have similar attributes. It goes into detail about measurements, case studies, studies that Apple performed and other intuitive design properties that Apple recommends in their design document.


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


1

You ask how? For many people there are many different ways. This is what I do: Write down the functions of your application. Then start putting the functions into "categories", for example: functions: chat, add friends, ignore list, play video. I can put "chat", "add friends" and "ignore list" into the same category, because they are related. After ...


1

Visual or branding guidelines is a broad term that could describe any number of things; the customary ambiguity of GD terms; yet I've noticed that in most cases they are a necessary measure to ensure third parties apply your branding correctly. What you're talking about is more a consistent similarity and feel between the apps which I think can be better ...


1

The best way? A designer told me once: Web-Design is not the same as (iOS) App-Design. You haven't the same size of screen, the same kind of action (touch vs mouse, etc). Just adapting a web-site to an iOS App is not recommended. You have to transform it. Use an iPhone/iPad/iPod Touch. You have to get familiar with the OS (I can't find it, but that's a ...



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