Tag Info

Hot answers tagged

34

When you provide only one side of the story you allow the listener to fill in the other half on their own. This can be a powerful story telling tool... ... but when you don't want to leave a situation open to interpretation you need to provide both sides of the story. When learning how to do something new you find guides explaining the "Do's and Don'ts ...


18

I prefer 'Sentence case' over 'Title Case' because sentence case respects the difference between proper nouns and the other words. I always thought that it was customary in English. In Spanish it is not, we use sentence case, like this traditional argentine newspaper does. This traditional USA newspaper uses Title Case instead. These are language ...


10

The focus state should be more obvious than the hover state A mouse over or :hover state is a more direct interaction (i.e. the user is controlling the mouse cursor directly over the button they want to click) The :focus state, on the other hand, requires a separate scan of the entire page in order to determine which component is currently being targeted. ...


10

Dont's can be as important as Do's in UX While design frameworks should focus on describing positive practices and principles (do's), it's important to provide guidance on avoiding common pitfalls, antipatterns, and errors. Some best practices are simply easier to articulate in the negative than in the positive. For example, which of these is easier to ...


6

Would Yahoo! style guide work for you? Here's a few others: Web Style Guide 3.0 Netflex Style Guide Skype Brand Book WebEx Brand Style Guide Android Developer Style Guide


6

My approach to this is completely style-guide oriented. The online Oxford Guide Style states: The general rule is not to use a capital letter unless it is absolutely required. The book itself states: Capitalize the first letter of headings and captions. So it appears Sentence Case is the way to go, event for captions.


6

You're essentially asking how to design an pamphlet to interrupt someone's attention and get them to read something that they aren't interested in. The answer is that you shouldn't. It's poor UX. If you want people to read a pamphlet, however there are a few things that you can do (outside of the design of the pamphlet) to increase that possibility: ...


4

Aside from the case that has been made for improved readability, I also argue for sentence case it on the grounds that it's an easier rule to remember for people actually implementing (graphic designers, engineering, writers, etc.). Title case lends itself to all kinds of arbitrary decisions when implementers don't want to be bothered to look up whether ...


4

There's a couple of CSS frameworks for Material Design, not including Polymer: Materialize: http://materializecss.com/ Material Design for Bootstrap: http://fezvrasta.github.io/bootstrap-material-design/ There's also https://material.angularjs.org/#/ if you happen to be using AngularJS, but that might be a little bit heavy for your liking too.


4

Honestly, as long as your :hover state & :focus state are very clearly showing exactly which item will have action the taken on it, I can't see any reason to style them separately. :focus is essentially a keyboard hover. The previous answer is correct in saying that a :focus element should contain a box around it, but as long as the outline property ...


3

Google has a wonderful visual style guide that applies across platforms: https://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 https://www.behance.net/gallery/9084309/Google-Visual-Assets-Guidelines-Part-2 Here's a style guide for an IBM conference, although it's more concerned with branding than software, it could serve as the ...


3

The closest thing I can think of to what you're looking for are Interface Guidelines. A good example of this is Apple's iOS 7 Human Interface Guidelines, specifically the controls section. They have lots of pictures of UI elements with call outs, descriptions of how they are meant to be used, and defining characteristics. Other sources: iOS 7 Human ...


3

What you call visual elements are really just the parts that are unique to one application vs. another. The logo, color scheme, and icons are most often unique elements that have to fit into, and often determine to an extent, the style of the website. UI elements are just building blocks that can be used and which are expected to be well known to people ...


3

I have experience of three different tools for creating style guides: Confluence The first style guide I implemented was built using Confluence. It was more a design pattern library, containing patterns and best practices for the most common UI design problems. Each pattern contained an example image, description how it works and why it should be used, and ...


3

With regards to buttons, if you use all-caps, then it allows for perfect vertical centering of the text within the button. No need to worry about ascenders / descenders. However, if your text is longer then 2-3 words it can be difficult to read. This is where sentence-case works well.


3

It depends what you want to achieve. There is some evidence to show that the use of capital letters slows the ability for people to scan content – it breaks the flow. So if you want users to READ and not SCAN the buttons or the titles you should use "Title Case"


3

Title Case for Headings and Buttons It's easier and faster for users if they can to identify the shapes of words. "We recognize words from their word shape." also called the Bouma Shape. Read more: http://en.wikipedia.org/wiki/Word_recognition Bouma Shape: http://en.wikipedia.org/wiki/Word_recognition#Bouma_shape A Few Examples ...


3

I dont think this is specific to UX. This is actually a question of knowledge management. There is a whole ecosystem of people/products/services for this kind of thing. Software like Wikis like Confluence, SharePoint, MadCap Flare, Salesforce Sites, Google Docs all are viable options. It depends on your security (and other) requirements. Google: ...


3

The key message to communicate to the reader is not the do and it is not the don't either. It is the difference between the two. Showing the two next to each other communicate this difference about as clearly as it can possibly be done. If you show them only one of the two, they will be left guessing what difference you actually had in mind. It is also ...


2

The Ubuntu web design guidelines [PDF] covers from layout to typography of the Ububtu community sites.


2

Web app style guides are very rare... I've found by a research some time ago a good style guide for web apps. Hope it helps. http://developers.sun.com/docs/web-app-guidelines/uispec4_0/01-introduction.html


2

Working on a styleguide now. It's in HTML, running on a local server. There are several reasons for rendering it on the web: 1. It's very easy to share, navigate and search. 2. You can see interactions and behaviors as they will appear to users. 3. Code snippets -- a styleguide isn't much use to developers, unless you provide the .css, .js and .htm files ...


2

I agree with Aviva Rosenstein that you have to design your deliverables just like you design your projects, by asking questions like: Who's the target audience? What are their needs? What needs to be communicated? What are their goals? For me, I'm increasingly trying to influence our team of developers to adopt best practices/corporate standards. ...


2

Based on my experience of producing a few style guides in various formats (html, wiki, pdf, doc), I found simple static HTML pages provided the most flexibility. It's usually developers who are driving creation of web style guides, because they are the primary beneficiary. Consequently, the burden of creating and maintaining one will likely fall on you ...


2

Why not create a PSD of your UI elements. For example this is the UI Guide created by Teehan+Lax for the site Medium.


2

My opinion is that there shouldn't be an exception process. There should be a set of patterns or components or what have you that are the first go-to resource, but a UX designer should be able to make exceptions as needed for whatever purpose that it makes sense to do so. Later, said exception should be added back into the pattern library as an alternative ...


2

It's rarely a good idea to make up meaningful (non-decorative) UI elements just to balance out the screen. The point is usually to remove stuff, not to add stuff :). This is for all kinds of reasons - cognitive load, visual clutter, focusing the user on what matters etc. As to the problem at hand, you can tackle it in a number of ways. The important thing ...


2

The default is, as you said, to underline it where clicking on it will activate the phone app. Alternate solutions are all graphical-based, using the same mechanism but adding something to the number. Skype has a box around numbers, Google Hangouts puts a circle with an icon, etc. You can spend time doing that, but I recommend first offering the basic ...


2

I've found that there are some DON'T DO examples that can actually impact a product more negatively than a DO example would affect it positively. Poor color contrast or font choice can turn people off a product quickly even if it has a well thought-out navigation system and the flow from one screen to another makes perfect sense. In software development we ...


2

I think the answer is simple: smaller design teams don't have the time to do it. Everyone wants to put out their own style guide. Uber's is pretty good. Google has a new style guide for Android M. The big players have them, and they have them for two reasons: to promote their styles (which is an extension of branding) and to publicity. Even design teams, ...



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