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

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


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


6

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.


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

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


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

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


5

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


5

I believe you are actually referring to the Antipixel "under the hood" buttons (of blessed memory). They were 80 pixels wide by 15 pixels high, with a simple bitmap font, stating that the site was web standards compliant, used CSS or XHTML, and so forth — along with any other buzzword-compliance that might have served as an in-joke in your blogging/tech ...


5

I'd likely use some type of directional arrow. If they can swipe/pan in any direction, I'd have four arrows to show that. The following image from a google search is similar to what I'm imagining: If users can zoom as well you could pair it with a magnifying glass (though I'd connect the arrows): If it's just two directions you can use the same concept ...


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

Better, but not good It's been a while since this question was asked. In that time, web fonts and screen font rendering has continued to make strong progress. Even the default Bootstrap theme still holds up: In your original screen shot, the font used appears to be Arial. This is a Windows fall-back for Helvetica, the 1st priority font (as seen in my ...


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

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

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.


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

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


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


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

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

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:


3

There are a lot of different possibilities to this and this is probably a bit opinion-based. You're also asking for a coding solution, so it might even be a better fit on Stack Overflow. That being said, I would probably just change the color of the button, when it's active. Inactive and active . Here is my JSFiddle, so you can see the code: ...


2

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


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



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