Skip to main content

Questions tagged [style-guide]

A set of guidelines designed to help an individual apply a particular style, often created by designers to help support a front end developer but also used extensively in other fields

Filter by
Sorted by
Tagged with
0 votes
3 answers
1k views

Using Display S, M, L, XL, 2XL instead of H1 -H6 for typography in a Design System Manager (DSM)

I find using specific H1 - H6 is confining since different pages may need a different size H1 and so on. Also instead of making 2 sets for desktop and mobile this would work as one file. Does anyone ...
0 votes
2 answers
568 views

How wide should my artboard be (Container width)?

I came to a point when I needed to decide what would be the container width for my pages. My project involves designing a web platform with a dashboard and a side menu for navigation. I made a little ...
3 votes
1 answer
195 views

How to deal with centered content on a layout with a sidebar?

I have the following view in my application, where a list of cards containing some information and a button is present. In order to prevent uneeded space within the cards and make the button closer to ...
0 votes
2 answers
179 views

Is skeuomorphic design out of style? [closed]

Is skeuomorphic style out of fashion? Is it necessary for design system to have skeuomorphic style for other elements in the system? Is flat design not in trend anymore?
79 votes
8 answers
24k views

Should we use 'Title Case' or 'Sentence case' for headlines and buttons?

I am wondering if we should use Title Case or Sentence case for buttons and headings in websites and web/mobile apps? Title Case: Manage my Account Delete my Account Sentence case: Manage my account ...
0 votes
2 answers
459 views

When to use primary or secondary buttons?

Trying to understand when to use a secondary button color on home page? I know to use it on save or cancel etc. But when on home sections?
1 vote
1 answer
92 views

ISO Norm as basis for a good style guide

A few years ago I was attenting a conference for frontend web developers about good UX/UI with focus on how buttons in online shops should behave. In my hand written notes I found the following: DIN ...
3 votes
1 answer
398 views

Can Toggles be used instead of Checkboxes?

I have seen multiple applications going for safe usage of checkboxes while there is a multi-select scenario of options shown in list or under one category. What is the rationale of having checkboxes ...
0 votes
2 answers
57 views

Clean design ideas for promoting users to explore more

I have a website which promotes local fitness events. A lot of our site visitors are through Google. They will generally arrive on a specific event page and then leave. I have put suggested events at ...
1 vote
1 answer
2k views

What is the main difference in between a UI KIT and a Styleguide?

We are working on documenting visual design and I wanted to know: what is the main difference between a UI KIT and a styleguide? Is the difference between them that the styleguide includes design ...
2 votes
3 answers
199 views

Design System rules

I would like to get your input and experiences with styleguides. Some of the designers I work with insist that the design system should have rules to be followed to the T. Some sample rules are: A ...
0 votes
0 answers
70 views

User Experience - graph and table

Does anyone know if it's a good UI -UX practice to add multiple select options inside a table?
0 votes
0 answers
352 views

How to define label text vs body text?

I am setting up the initial typography style guide for a mobile fintech application, the issue I am stuck with is how to communicate what part of content needs to use "label" style vs "...
3 votes
2 answers
126 views

How to show that a form has been dirtied (edited) using a Material design?

I have a vertical list of expansion panels. Each panel has a form under it. I would like to know the best style for showing that the form has been dirtied (edited) on the expansion panel title. The ...
2 votes
1 answer
125 views

Help! I need something better than MS word for my UX spec docs [closed]

My team and I have been using MS word to deliver UX specs to our developers. Our documents include a section for final visuals, content, wireframes, interaction notes, and business analysis flows. ...
1 vote
1 answer
279 views

style guides: lower case titles

I've just started at a new company, and I'm trying to set up a style guide for our UI text. I know that for titles, the most common options are Title Case Sentence case One of our corporate values ...
0 votes
1 answer
80 views

What is the meaning of Drive, Drive Compact, Focus, Focus Compact in Style Guide

When I read this article, https://design.lyft.com/building-a-design-system-library-3a1f0d09088f#2cf8 found following image. Its talking about Frame Name The frame name is the top-level grouping of ...
4 votes
2 answers
882 views

Why are there not more interactive design / style guides out there? Aren't they more user friendly?

It seems like only the larger companies working on development and design frameworks are producing interactive documents that provide information about the visual and interactive design components/...
1 vote
1 answer
86 views

Simple cross platform style guide for mobile apps or a recommended approach?

Having joined a new project recently I've found a lot of padding / margin sizes etc set in the App which had variuous names and isn't consistent. I've also been briefly looking at style guides blog ...
1 vote
3 answers
207 views

Something like a UX 'checklist' for designing elements for beginners?

We (more experienced designers) have a few noobies at work and were wondering if there isn't something like a general checklist for them to go through, e.g. when they're designing an element for a ...
9 votes
3 answers
2k views

Excel spreadsheet colour coding/design/layout principles?

With programming you have "software design patterns", with websites you have design standardised (and then some templates, e.g. "bootstrap"), and people know where the input etc. ...
1 vote
1 answer
101 views

How to colloborate and define new style guide for an existing corporate design?

As a naive ux designer, I am facing problem to define a style guide. There is existing style guide made with Adobe XD. As a Team effort we would like to improve and manage the style guide. A ...
1 vote
2 answers
138 views

How many types of typeface should I use to make the better user experience?

I am designing a style guide for my project and read few articles that suggest it's a good practice to combine more than one style of typefaces to enhance user experience. May I ask how to decide the ...
2 votes
3 answers
142 views

Styleguides: In which category do breadcrumb trail menus fall?

I am designing a new style guide from an existing style guide. The breadcrumb menu is an essential part of the design. I am organizing the new style guide in categories such as Colors, Typography, ...
8 votes
4 answers
3k views

how to implement a style guide for a team of 2-4

I am reading Lean UX right now, and there is an idea inside I have never read before. It is about style guide. I would like to implement that but with as small a foot print as possible for the ...
0 votes
4 answers
901 views

What do I tell the user if the image they have to upload is very specific in height and width? [duplicate]

Am making an android app. I need to make the user be able to upload an image of a button that is pre-configured in size. So they would essentially be only changing the design. My questions: 1. ...
2 votes
3 answers
135 views

In what part of the design process do you make a style guide?

For me I usually design a bunch of high fidelity mockups to see what looks best and then start adapting the components to a style guide. Are there people here who actually design the system beforehand?...
-2 votes
1 answer
87 views

What parts does a design system have, how to support development? some documentation with step by step examples uu [closed]

I'm just starting in the world of ux, I would like to know what a design system has I have read but I still don't understand, the only thing I have been able to do is create some components in figma ...
1 vote
2 answers
115 views

Why are design systems by many companies publicly available?

Why do many companies like IBM, GE, VMWare, etc make their design systems publicly available? Designers find it useful, but how is is helpful to those companies and why do they do it?
4 votes
1 answer
687 views

Specifying semantic colors in design manuals

Is there any meta-analysis of Corporate Design Manuals or a guideline for developing CDs that includes which semantics CDMs associate with colors? What are they like, i.e. which kinds of semantic ...
1 vote
1 answer
193 views

What frameworks exists for UI documentation?

I´m working on a style guide which I want to put on the web with info, examples etc. I know there is one API / framework called Fractal, but it does not have the look and feel I want. I see a lot of ...
5 votes
2 answers
1k views

Difference between UI and Visual Design/Style Guide?

From looking at some of the style guide for web applications that are available, there is a distinction made between the visual (icons, colours, logos, etc) and UI (look and feel of user interface ...
3 votes
2 answers
227 views

German style guide for capitalization rules of UI elements

I want to improve the text consistency in our software, because over time some things got messed up and we have different styles for example in captalization of UI elements (controls). I find a lot of ...
27 votes
7 answers
3k views

Why do styles guides have what not to do?

I'm tasked with writing a style guide for a .NET application. Currently there's about six developers that just do whatever they want in terms of style. Similar buttons are in different spots, ...
-1 votes
1 answer
756 views

what are the best fonts for website style baby? [closed]

I make a website for a garden good and they ask me if I can add a font style baby to website so I did not understand this and I looked for a little for internet and I found this fonts Roboto Gaegu ...
21 votes
3 answers
14k views

Should :focus and :hover styles be the same or distinct?

I'm in the midst of redefining a cross-application style guide, and I want to make sure we're accounting for accessibility in the design, including contrast ratios, text sizes, and focus states. One ...
1 vote
4 answers
670 views

How do you define typography styles in your designs?

When defining a style guide, which of the following is most common when naming layout components? Stating the specific H-levels to be used (i.e. H1, H2, etc.) Create your own set of naming ...
0 votes
4 answers
4k views

Where can I find style guides for web apps online? [closed]

I am developing a style guide for a web application. I would like to find some good example style guides online to refer to. I am not having much luck with Google. What are some good resources to help ...
4 votes
2 answers
1k views

Do bigger buttons improve usability and how they correspond with design? [case]

We're trying to incorporate a style guide which helps developers understand and build CSS across different resolutions. After reading these: https://uxplanet.org/buttons-in-ui-design-the-evolution-of-...
5 votes
2 answers
406 views

Design consistency and style guide

My company has 3 different products, 2 of them are more similar in the interface (one is an advertising/publishing platform, the other is a platform to publish web and mobile applications), and the ...
1 vote
1 answer
111 views

Should I provide multiple style guides for responsive design?

I am designing a responsive website and wanted to provide the developers with a style guide. But I was wondering if I should provide 2 separate guides, one for the big screen one for the small.
6 votes
2 answers
937 views

How to decide which color palette to associate with any app? [closed]

How to decide which color palette to associate with any app? How do you make color communicate tone of app? Deciding one color is easy, say Gray for serious enterprise theme but what about the rest of ...
3 votes
1 answer
125 views

What all must be included in a style guide?

I am working on a project which is basically a document viewer, I have been asked to provide style guide for the same. I was wondering what all must be included in the style guide? should it include ...
0 votes
1 answer
619 views

Creating an animation and interaction stylguide

extending to the animation aspect of a style guide that we have already built for our ecommerce website and app, What area's of the UI do you need to look at. These are currently what I could break ...
2 votes
1 answer
110 views

Applying atomic design methodology to an existing style guide. When it is too complex?

i'm in the process of applying atomic design thinking to an existing style guide. However I'm noticing a few problems some compound components can't be derived from base components. so they seem to ...
1 vote
1 answer
4k views

How is a 'design language' or design system' different from a style guide or pattern library? [duplicate]

Google calls material design their 'design language'. IBM and Airbnb also call what seems like a style guide a design language or design system. What's exactly the difference? From what I see at a ...
14 votes
5 answers
2k views

Should I be more worried about creating a consistent UI among platforms or creating native experiences? [duplicate]

I am starting to develop for all three major mobile platforms (Android, iOS, and Windows UWP), and have run into a UX issue a few times. Each platform has it's own design guide. Android has Material, ...
2 votes
2 answers
3k views

UI design for Rating Scale with 0.5 incremental point scale

I'm working on a rating scale that will consider point decimal with 0.5 increments from 1 to 5. The use for this is to rate/score. The previous rating scale just considers whole numbers from 1 to 5 ...
3 votes
2 answers
163 views

Style guides, systems and pattern libraries

A few questions on style guides / systems and pattern libraries such as https://www.lightningdesignsystem.com or http://rizzo.lonelyplanet.com/styleguide/design-elements/colours. Style guide are the ...
2 votes
5 answers
1k views

How to write a perfect style guide [duplicate]

I'm developing a sort of a theme with a set of pre build components with is such as, styled data tables, input forms and etc... This is developed for internal usage in my company and I would like to ...