59

My thinking is instead of the save icon alone, why not treat all the tool icons as a set. Consistent =) I wrote more on this here.


52

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


51

A wireframe is about functionality. It can be a really simple sketch that demonstrates what sort of things you can do in your design. For example, a wireframe of a website will show the navigation, the main buttons, the columns, the placing of different elements. You can think of it as a blueprint for a website. A mockup is a realistic representation of ...


42

I think this is a physical design / interaction design problem, not a graphic design problem. If a door has a handle on it, I think a lot of people are naturally going to try and pull on the handle. Therefore, push side should not have a handle, and the pull side should have one. Push side could have a palm print graphic if necessary to show where to push....


32

Your arrow concept and what you plan to use it for seem appropriate. And from what I can see, I guess you don't have much room for icons anyway. Maybe what could help you is simply to use thicker and curved arrows to hide that effect you don't like. Below is a quick example: You might need to adjust the arrows to your preference and clarity when at small ...


30

Any single colour can be worked into a working colour setting, even for a website. So, yes, they are right in stating that using their blue is good for brand recognition. A good idea might be to take the original #2DCCD3 and create less bright, saturated versions of it to use next to the base colour. You can create these shades using the HSB colour model. ...


28

Purely off the top of my head....... Simple door icons? Or perhaps doors with arrows?


26

Building on David Moore's palm print idea... The best graphics don't require much parsing at all. Icons representing the way the door swings require a translation into the action needed to achieve that effect. So let's show 'em exactly what we want them to do. Push: An open hand. Life-size, probably a bit bigger, placed on the door in the location you ...


25

Edit: Since you keep pushing :) I will answer directly: Is the style, creativity, & inspiration side of interface design not equally important compared to the content, efficiency, & productivity side of interface development? is it not important to focus on additional fancy style? I have a little problem with the question, as there are ...


25

From a purely design standpoint, starting with the mobile version first does make sense. The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate you allow yourself, the more you'll have to think about what is important in your design, what information you really need to show. Also, you'll force yourself ...


24

Yes, this question is incredibly broad. Maybe it's OK as a wiki article. For starters, you need to define 'we'. There are many, many people and roles involved with designing web sites and they all tend to have different common mistakes. Here are some issues I've seen that seem to pop-up over and over again: Failing to properly define the business' ...


24

You save a document when you are satisfied with its current state. So the icon can represent that: It's a similar idea to OK buttons in dialog boxes (which sometimes include a checkmark icon).


20

It seems that the tendency is to store anything in the cloud and we may use local storage just for temporally editions. If that is the case, then using the "Cloud Up" to "Save", may be the alternative.


17

Wireframes are rudimentary shapes or lines used to designate position and/or size only. The goal of any wireframe is to "fit" the elements into a layout, not indicate how elements may actually appear in a final design, only where they will be located. Mockups are built on top of wireframes and go further to show overall appearance aspects of a design ...


15

So you have a few options, usually. At the moment, your problem is that lines 1 and 2 look further apart than lines 2 and 3, even though they're not. It's an optical illusion created by the lack of descenders and ascenders between the first two, but not on the second two. The solutions fall into two basic categories: avoiding this situation all together, ...


15

I think all you need to do is change your text color to White:


15

Short answer: Form follows function. It's an age-old but often forgotten design principle: how things look or are shaped should follow what they are for. Function shouldn't be twisted or squeezed to fit a form. A user interface is for use and usability, so if you're making compromises on function (usability) in the name of form (aesthetics), you've got ...


15

Most of the time for live sites you should not have a page at all or, if you really want it live (perhaps to show to others and you don't have a development site), don't link to it publicly anywhere. This is because if a user sees that you have content that interests them enough to click on it, they are expecting to see the page. Having an "under ...


15

Actually there may be a great deal of thought put into such usage, well beyond personal preference or some client directive. Style If you know you want a more friendly, loose "feel" then you would go with more rounded shapes. If you want a more corporate, serious appearance, you'd lean towards corners, triangles, and generally hard line shapes. Placement ...


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


14

This is what I came up with after reading some answers here... This is an SD card, work, and arrows all combined.


14

Based on pretty much all the activity and input on this question, and particularly Takkats examples, I think the perfect message consists of three parts, in order of how they'd be noticed: Colours - Fastest Impact. Red for Stop. To pull a door open we must stop and change. Green for Go. To push a door open we keep going with our momentum. Big Graphical ...


14

It's the print tiling indicator, basically showing you what and where your artwork will print with the print page size you currently have set. You can turn it on and off from the view menu (View → Hide/Show Print Tiling). You can even move it around manually with the Print Tiling tool, but unless you're directly printing from Illustrator there's ...


13

To a user "save" means "save my new work to the file". I like the one on the left the most; makes it feel like "stuff goes into the file".


13

On your home page put a big ad: Do you really like this web site? Want to help make it better? I'm looking for a UI/UX designer to collaborate with to make this project better. I wish I could pay but it's a labor of love for me, so hoping it is for you.


12

I think adding people to the image helps a lot: Source: pushpullsigns.com


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


12

Mobile first is best practice -- it's not law, and if you understand why you "should" be using it, you can make an informed decision as to why you don't want to use it on a particular project, and that's fine. It's worth noting that "mobile first" relates to the design/UX and the build itself. Mobile first design won't speed up your site for users, but ...


11

Pixel fonts aren't terribly different from tiny print fonts when you get right down to it*. The one big exception is that you know what the medium will do with pixel fonts -- a very big advantage. There really isn't an ideal pixel grid, per se. Obviously a larger grid gives you more room to work. The smallest types I've seen work successfully are 7px ...


11

Do interfaces really need to “look good”? Nope. As you state, and prove, some very highly succesful websites that have horrific UIs succeed. Reddit is a great example. As is Craigslist. So no, you do not need a great looking UI to succeed. But a site better have some really amazing content to make it worth getting through a really bad UI. In other words, ...


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