Tag Info

Hot answers tagged

47

Some comments: The Go button size should be bigger and present the best contrast of all since it's the primary one. Clear is okay because it's a secondary action and it should be neutral. For me the Switch button has too much presence both in size and constrast. I'd position it between the Origin-Destination dropdowns, where it make more sense "by it ...


11

One solution is to visually separate your button by priority. You'd typically have primary button(s), secondary button(s) and sometimes tertiary button(s) and/or non-preferred action buttons. For Primary and Secondary, I usually suggest your preferred branding color (purely subjective) in two levels of contrast. High contrast for primary, slightly less ...


6

Think of the Tango (the dance). You learn the moves (components of the dance) in a set sequence. When you know them well, you can make up your own sequences and so create a unique dance of your own. In short, componentize. Learn the bits and pieces as others have done them. Things like color, typography, layouts, parallax scrolling, ajax effects, etc. Don't ...


5

I think what you are after, are some way of indicating "more, unspecific information". As @Cakey points out, not everything in the world needs an icon, so maybe some indication of editing might work fine. Luggage tags are usually used for tags as in identifying synonyms on additional information, mainly as a help for search and batch. Such as swiss ...


5

I suggest a bunch of indicators working in tandem: 'Greyed Out' - give the unavailable buttons some transparency, (or the appearance of transparency with lighter colours). This will make sure it is noticeably different from the other buttons, at the very least sparking curiosity as to why it's different. 'Strike-THROUGH!!!!' - "Like seriously guys look, I ...


4

The main 'issue' (not really an issue though) that I have with the depth is due to the divider lines in your submenues: The drop shadow is underneath the lines, when it should be on top (with some transparency applied to it), which causes the lighter line to appear even lighter. I'd try that first, moving the shadow to the top. However, something else ...


4

A more elegant solution would be to grey out the button, set it's state to disabled and use a disabled cursor to clearly show the state. I've thrown together a quick codepen to demonstrate this.


4

My guess is that the bubble just calculates the required margin at both sides of the word: --word-- --longerword-- What happened in this case is that, because the letters of the typeface have different widths, it looks like the bubble is staying the same size. When, in reality, it's just a coincidence. If the font were fixed-width, so each character ...


3

In all the simple button examples (including other examples in the animation section), the ripple effect compliments the colour of the text or icon - which should follow readability (use a colour contrast checker if in doubt). In general, this is common sense: if you have a 'dark' button requiring light text, adding light ink will be visible and consistent; ...


3

The fact that something isn't there at all is a great indication that it is not present! If you'd like to still display the things that were 'chosen but missing' in each result element I suggest not doing it as the same elements in the same section with the only difference being styling. Rather have it be clear to the user that this section shows what ...


3

You have my sympathies, this is a tricky thing. A very similar question has been asked before: How to hire a graphic designer? I would urge you: find someone local. Find the best you can, locally. Designing via email or even skype is a major hassle. It can be done, but I personally do not think it can be very efficient even if the people involved have know ...


3

As mentioned by plainclothes, learning the basics of design is important. There are many good resources listed here on GraphicDesign to get you started which you can find easily by checking out the resources tag and sorting it by votes. You should give many of the resources provided a read if you're wanting to become a good designer of anything. As for UI ...


2

I think the logic is flawed. I choose some amenities and as a result I expect to see ONLY hotels that combine these amenities. You should inform the user that there is NO hotels that have all the amenities and maybe let them see the results with missing amenities by clicking another button. The red crossed button works well in my opinion. If there are users ...


2

When it comes to colors you typically are going to want to stick to 3 colors (triadic color scheme) on your site overall as a rule of thumb, when it comes to choosing the colors there are many sites which have been created to assist with the styling and help to make the scheme look as good as possible. Adobe Kuler, Color Scheme Designer both of these sites I ...


2

I don't think displaying more information will make the process any easier. Quite the contrary, you will have an overcrowded screen where locations are still difficult to find. I would instead consider a more straightforward way of filtering locations. It could be an input field where the user can write a location and it filters the results live... or a ...


2

Your business app is not going to be redesigned regularly, particularly if you're saying the current budget for design is low. So ignore the trends. Focus on usability and branding consistency, in that order. Make it easy to use. Make it easy to understand. Make it look like it's part of the company. If the company uses flat designs everywhere, use that. ...


2

Seems to me simply a responsive design menu: when a site is shrunk to mobile size, the usually top menu (global) "migrates" so as to be on top of the mobile site. You can test this by taking a site, and shrink the browser window (this is not really good enough for development, but it will give you an idea. For dev, there are tools that will help you resize ...


2

Have you tried using xCode Storyboards? Can't get too much more Apple-app-looking than that and xCode contains every kind of element that can ever be put into an OSX app.


2

Here's something that I've found very useful in the past: http://photoshopetiquette.com/ It doesn't answer every part of your question, but I find that it covers the majority of the issues I commonly encounter when receiving Photoshop files from designers. Things like labeling layers, using layer comps, including fonts, avoiding multiply and other blend ...


1

I am pretty sure even if you zoom in that close to a vector curve you are going to see those jagged edges. Like the above comment mentioned check out the difference between raster and vector.


1

Zebra stripes do tend to be quite disturbing in small tables, making them difficult for visual scanning. If you must (and absolutely must) use zebra stripes in a compact table, I would recommend that you keep the stroke low, lower than 2 px definitely. The most preferred solution would be to use any other color for the table background (like blue or green, ...


1

Two thoughts: Use color (i.e. a green currency symbol = paid), while a grey icon = not paid Use "sub-icons", that is have the currency symbol and then offset in the lower right, have a check mark (paid) or a clock-face (pay later).


1

You can use this plugin: https://dribbble.com/blazrobar/projects/119709-Perspective-Actions Or search in Google "perspective mockups" and will find resources.


1

Another option is to use a blur tilt-shift effect on your preexisting drop shadow. Create a drop shadow at 90 degrees, 1 px distance, 100% opacity, Size 1 Right click the "fx" and select create Layer, press OK Select newly created layer and navigate to Filter > Blur Gallery > Tilt-shift Using 1 or 2 points you can turn and maneuver the ...


1

Why don't you try a small "graph" style icon to represent attributes: I feel that this icon can't be confused with something such as "tools" or "options"


1

An icon representing generic control elements should work, for example showing a two-part radio button. Or, similar, a simplified equalizer control: If a symbol of "control elements" causes confusion with a tools icon, representing just a list of items could solve that: Images from awoken-icon-theme


1

You can, if you reduce the opacity to 80% of the layer and merge it with a blank layer this will be 100% again. Thus using the color picker this will tell you what the color code for 80% is. 80% of #555555 is #777777 Also this question may help. Formula for finding out the result of a color after applying x-opacity to it


1

Azendh, if I might make a suggestion. Head over to english.stackexchange.com and ask them for help with finding a more concise word for "classify incoming measured data and make a decision and follow-up the decision's consequences." My initial reaction is that what you seem to describe is: User inputs data with a and produced result is a function. f(x) is ...


1

I know the feeling, even as an artist. when designing stuff to code, one can quickly become bogged down with technical concerns. The trick is to sketch your design, on paper or a white board*. doing this removes all concern of pixels, measurements and other obstructions to the creative process. When drawing, it is up to you how much you want to stress ...


1

This is known as a responsive design Twitter Bootstrap have a ton of tools to help with web, you can view their site to see a responsive system in use. This would help you design a responsive desktop website that would be able to roll out to a mobile device or tablet. This can be emulated via Chrome > Inspect Elements > Emulation > Emulate. If you wish to ...



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