Tag Info

Hot answers tagged

17

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


9

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


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

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

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

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

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

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

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.


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

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

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

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

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


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

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

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

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

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


1

I've used tools like http://patternlab.io for that in the past. As you work through the site extract elements into the style guide. But it's a manual process, not automated.


1

I think it depends on how specific or detailed your style guide is. If you have tried to read either the Windows or Apple style or UX guide, you'll find that they are designed to provide general principles on how to design the interface and interaction, but are far from perfect. In fact, often the confusion is generated from people not interpreting the style ...


1

Title case for buttons. As @juan-lanus suggests "US English is more capitalization-prone than Spanish.". As @bart-gijssens suggests there are no widely followed guidelines for webapps, but with Apple's attention to design and their significant share on mobile, I go with title case (title-style) for buttons as described in both iOS (pdf) and Mac HIG (pdf).


1

For annotating the mockups, it's good to use a tool like specctr, but anything which gives you a new layer is fine. You mentioned that fireworks is not part of your toolset right now (it's a very nice tool), well, specctr is expected to have a photoshop version sooner or later, but on the other side, it's a matter of a few lines. Tools like Microsoft ...


1

I usually use Axure to create UX related documents. It allows you to generate a website very easily and you can also show interactivity of the UI to demonstrate a certain interaction pattern. Everyone can easily access the website and you can also provide a link to a specific page on the site if you want to communicate some specific area. Having an ...


1

When I worked as part of a dev team at Oracle we had a policy that all docs including UX guidelines had to be in html... so that they could be easily shared and edited. Worked well.



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