Tag Info

Hot answers tagged

51

The Go button should be bigger and have the highest contrast of all since it's the primary one. The Clear button 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 itself". Here ...


12

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


6

The reality is that most "user friendly" tools you are gonna find are too limited to live in the jungle of modern webapp craft. You cannot drag N drop your way to an asset-rich and use-case finished product. So the solution is to DiY it up using an accurate [shadow]DOM: Chrome Inspector, often called DevTools https://developer.chrome.com/devtools. It has ...


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


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


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

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


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

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

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


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

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

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

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

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


2

HTML is itself quite slow That's debatable. I'd say production-ready presentation layer code takes longer to create than a quick sketch in Illustrator, but you don't necessarily need production-ready code to design in HTML, either. There really is no alternative between static mock-up tools like Illustrator and Photoshop and actual markup. There are ...


2

You need to split the questions up and you shouldn't have them on one single page. I would review the hierarchy in which the questions need to be answered and see if some of the questions can be placed in a trigger so if someone says YES to a question it will expand the other set. Look into a multipage form to prevent annoyance by the person filling it ...


2

The form appears to be non-public, so 700 values really isn't that unreasonable. First things I see are improper use of inputs. #21/22/18/32 should be radio buttons, not checkboxes (cannot be multiple values). And a number of checkboxes are far too short (4, 6, 19, 20 etc). Greatly increases the chance for input error. people will read the form for ...


1

Layers does what you ask on the Mac. Takes a screenshot, but creates layers for all elements - windows, shadows, cursors, etc.


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"



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