Tag Info

Hot answers tagged

8

I think a very subtle gradient will definitely improve the aesthetics of the buttons. Since the Windows 8 "Metro" style is a large proponent of this style, I'll use that as an example: At first glance the "tiles" look like they are a flat color, but if you look closely there is a very slight gradient going left to right. It is more noticeable on some than ...


7

An icon is representative of something. You can have a company newsletter with icons in the margin of each story representing HR, IT, Sales, Marketing, etc. A button is by definition interactive. You click on it and something happens. It may have pictures, words, or both. You can have an interactive icon which acts as a button, but if you click on a little ...


7

The problem with your link is proximity and emphasis. If you want people to notice it you need to add design to the entire page such as background colors to direct the user to different parts. That is a starting point for adding emphasis to the Upload Prenda. Depending on what you do with backgrounds, graphics, and the design you may also need to adjust ...


6

As you mentioned, when designing flat buttons you need to keep an eye on a couple of things. The first one being, I'd say: Does it look like a button? This is not necessarily something that depends only on the button, but on the rest of the elements of your UI. If you are using flat buttons, I'd suggest you avoid similar shapes/styles everywhere else. You ...


5

Things that can be used to differentiate buttons: the labels (obviously) color size order location proximity shape/style The more unintended damage an action may cause, the more likely you want to pick from more than just one of those options above. Not knowing the user flow for these commands, I don't know if your suggestion is enough, but it's ...


5

It also doesn't help that you're working with three four-letter words that all start with the letter 'S'. :) Color is an immediate indicator that something is different. In your first example you really have no idea what any of those buttons do unless you really take the time to pay attention and read them, at a glance, they are far to similar to ...


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


4

This is a fairly simple CSS button being replicated in PSD. I believe what John was seeing as an inner shadow is actually just a mis-aligned pixel. Here are the basic ingredients: Dark outer border Medium to light gradient (same hue as the border) Text shadow shifted down 1px using the border color The "remove" button looking debossed in the button ...


4

Try using an Inner Shadow Layer Style: You can tweak the size and opacity to adjust how subtle you want the effect to be Edit-- How to closely replicate the example: Taking a very close look at the example, it "pops out" using 3 features: An inner shadow to give the button depth A white drop shadow to give the foreground depth A gradient stroke to ...


4

There is a certain point in a long design process where it's easy to fall into the trap of overthinking what you're doing. Different parts of the design seem like they could be better, you aren't sure how, exactly, but maybe if... At that point, you begin an endless (and pointless) round of tweaks that as often as not end up uglifying what was fine to start ...


3

I agree with both Johannes and DA01, they've both raised the points that I would with regards to positioning, alliteration etc. But what I would like to add. With already having icons for sign save and send, then the re-positioning alone of the send button should be plenty. I would suggest not changing the colour as there is no need and it's also a bit ...


3

It's a dimensional, 3-dimensional, or 3D button. It's not a new trend but it is more widely supported today without images ... which begs the question why is this done in a sprite sheet? Weird. Scroll down to point 3 here for an example from 2011. And some from earlier this year here. Another couple of terms to keep in mind. Affordance: "a situation ...


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


2

A little more detail would help. There are two possible answers to your question. You're developing a sharing service and you want your icon to work well next to other service icons. In this case you'll want to provide standard square icon sizes: 16px, 24, 32, 48, 72, 96 ... I think that's about as big as a share button will ever get. A social service ...


2

As I was reading this I was struck by the similarity of my keys on my keyboard to the buttons: So I thought why not try a search on keyboard buttons. There has been a css stylesheet already created by Michael Hue, it produces buttons like this. https://github.com/michaelhue/keyscss It's not a leap to say these could be easily modified to make them look ...


2

For the surrounding circle you can use two layers, one on top of the other, both with Fill: 0% and Inner Shadow: Bkgr Layer 1 has a white inner shadow at -90 degrees (blend mode normal). Bkgr Layer 2 has a black inner shadow at 90 degrees. Button has Bevel & Emboss and drop shadow.


2

Since, like you said you are not an artist I would base your design only on the given APIs, Android and iOS ones. Like the user plainclothes told you be careful on the direction you are heading. If what you want it so build a game having the same design on both platforms is not an issue at all since it's usually the pattern. But if you are dealing with an ...


2

This may not answer the question.. When looking for a slight change in lightness I usually do the math - simple counting actually. If I have #191970 as my main button colour I'll add 1 or 2 to each number, resulting in a similar but lighter colour. The same could be done for finding a darker shade. So #191970 plus 1 to each would result in #2A2A81. ...


2

As the others have said, Photoshop won't create a true vector image. Although you can still create a shape like that in Photoshop that you can re-size with better results than re-sizing a PNG, GIF, or JPG. Create a basic shape using the Rounded Rectangle Tool Hold down the Pen Tool and select the add anchor points option Click on the sides of the rectangle ...


2

@Lauren Ipsum and @sambler have of course answered beautifully - I just thought I'd add a different perspective. We tend to think of icons as those little digital images that almost always trigger some digital event of some sort. They do not have to trigger anything, there are examples of digital icons that are merely demonstrating a context or process. ...


2

An icon is a small image, a button is a GUI widget that responds to a mouse click. It is common to show an icon on a button. Sometimes the 'button' drawing is also disabled so the button appears to be nothing more than an icon. So while they are two distinct things, developers often configure buttons so that the distinction is blurred.


2

While I can respect making such minimal buttons you really need to consider if/how they can be applied across the web on different websites, as you are making a framework. If you are providing buttons you need to make sure to provide just about everything else someone might use like tables, forms, etc. (Which I'm sure you're still working on). Take a look ...


1

What do users remember the most, position or color of elements? I will not come up with concrete suggestions, but a short comment on the headline: it is highly individual. Just like some people will say "I see what you mean" and others will say "I hear you" or something similar. Some people are tuned to visuals, some people are more tuned to sound. ...


1

I'll take a guess that you're exporting as PNG-8 with a small number of colors, which chops off any pixels below a certain transparency and leaves the resulting image strongly aliased (the technical term for "jagged"). PNG-8 only has one level of transparency; it's an all-or-nothing proposition, but using a high value for the number of colors can give an ...


1

There exist no standard for this. Only common sizes as DA01 mention in his comment. The reason you find sizes such as 16, 32, 64 etc. comes from the old days when most programmers also did the icon designs. The size 2^n fits nice and tight with how a computer operates memory wise (memory alignment) and programmers choose these sizes for that reason, as back ...


1

I would call them Orthographic 3D or Orthographic Raised. Orthographic Projection refers to the viewing of a 3D image where objects do not get smaller with distance. This means that vertical lines remain straight, and lines to the horizon are always parallel to each other.


1

I'm not entirely sure it has a name, but the top I've also seen as microbevel. Regarding the bottom row, It has become somewhat popular to stretch the bottom of the icon in an impossible shape. Not exactly flat design, but squashed design. See http://www.cameronmcefee.com/ for example of the github icon in similar style. I haven't found an exact name for ...



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