Tag Info

Hot answers tagged

9

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


8

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


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

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


5

The easiest and simplest way would be to darken the button when its pressed. Applying a 30% black layer on top will do the trick.


4

I created a double gradient effect and added a very faint outerglow for the inner circle to give it some texture.


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


4

Bootstrap is intended to be edited. They have a LESS variable list of overrides including the base font size, which then can get increased/decreased depending on your font choice and preference. Those sizes are then adjusted using mathmetical logic for other assets (like buttons, headings, menus, etc). In addition, you could change everything about the ...


4

In order to save time and allow for transitions between states, creating button effects in the styling language for whatever UI you're creating, not creating images for each one, is important. This will allow for the effect to be reused when you have different text, sizing, etc. Take for example designing for the web or something that understands HTML/CSS: ...


3

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


3

The typical technique is to reverse the gradient. A standard button typically goes from top-top-bottom light-to-dark. A pushed button then goes from dark-to-light. In addition, an inner shadow may also be applied.


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

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

If you have to keep the transparency, then at least make the icon itself solid, this will have enough contrast to work against the dark background - even if you can't see the outer transparent background.


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

If, what you are trying to accomplish doesn't have to be flat, i would recommend you just to add an inner shadow like this If it has to be flat-design though, i recommend change of color (darker) or inversion:


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

I would try it with some grey. So instead of 70% opacity with a black button, Try with some dark grey with a little less transparency. You have to look for ways to get some white into it. Very transparent textures, gradients or very slight white noise might help also.


2

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


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

If you're only problem with it is that it's a bit boring, that's not a very important problem. Often boring elements aren't so boring as part of the finished design. I personally can't see anything wrong with it; it's different enough that it stands out from the other elements, and it invites interaction thanks to those arrows. Anyway, if you really want ...


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


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

I've seen the top row referred to as 'microbevel'



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