#Shaunak Styleguide
signal sigil
This is for a different app btw
soft marten
It looks like you've never seen a style guide before
For a well laid out style guide
signal sigil
I have seen them before. First time making one
The reason why it has pink background was to better show the white colors and buttons
pearl sapphire
You can add a higher contrast background behind individual colours. Putting the whole thing on that colour makes it all difficult to look at.
It should be on white, black, dark gray. Something neutral and contrasted to the majority of your elements.
If your colours aren't showing up on a neutral, contrasted colour, that should be a red flag that maybe your colours aren't working together.
signal sigil
Okay and I have looked at other style guides before. I dont understand what I need to change in terms of format. Can I show you some I look at?
pearl sapphire
Sure
pearl sapphire
Can you see the difference between the dark gray-blue they used and the magenta you used?
signal sigil
Yeah I understand the colors
I dont understand what I need to change in terms of the format?
pearl sapphire
Remember 60-30-10? As a rule to follow until you're ready to break it: Magenta should never be more than 10%. Cool?
soft marten
I would also take note of the clear grid structure providing alignment within and across categories, as well as the use of hierarchy and consistency to denote labels and titles.
signal sigil
I know, never thought so much colors and details have to apply to every single ux concept.
soft marten
Those are the baseline for appearing professional. They should apply to everything.
pearl sapphire
So, a design system is basically a living reference chart. It's a tool for you to use. It should be built as usable components in XD.
Does that make sense?
signal sigil
Yeah
pearl sapphire
Showing it off, making it look "professional" is secondary to making it useful to you. Coincidentally, making it useful will make it look professional.
signal sigil
Can you explain more of that?
pearl sapphire
Like Ben said, using a grid and a hierarchy will help you better organize it. But beyond that, you need to be building this with the right motivation. You're trying to build a set of styles and components that you reuse over and over. You're building your own toolbox.
So having four different labels on the same button style is less useful than four variations on the style that all say "Button".
signal sigil
Do ux designers create a style guide first before getting into the prototyping? Just curious
pearl sapphire
You can use an existing design system, like Material Design, to start ideating, prototyping. Creating a full on style guide or design system takes months of consideration and effort. It usually comes after a baseline of functionality and requirements are set.
You can't design something if you don't know what it is.
signal sigil
When you say existing you mean like looking at other apps for ideas?
pearl sapphire
No, like publicly avaiable design systems to use. Most companies aren't building their own styles, they're taking existing frameworks and using them with their own colour scheme.
signal sigil
I see
pearl sapphire
So, is this style guide for... something?
signal sigil
Also when you look at the button section you are saying it is best to include "one label then all four or more just to be more organized?"
pearl sapphire
Uhh, more like, the point of including the buttons, or any elements, is to have that style set. Again, this is an internal tool first and foremost.
I'm gonna backtrack on something I said earlier. There's a difference between a design system and a style guide.
If this is a style guide, it's for outlining and communicating rules with other designers working on the same or related projects. It should demonstrate how things are used and how they shouldn't be used. It should cover edge-cases. It doesn't not need to cover every little detail, or every icon. It conveys the rules with the expectation of expansion within those guidelines. These are usually static documents, with updates as needed.
Design systems are usually built out of components that are usable, either in a mockup/prototyping software or in a dev environment. They should cover every repeated element. They should cover all variations of an element. They would have rules built into the components so that they aren't broken by edge cases. Design systems are sets of building blocks to put together to form whatever you're building. They should be all encompassing. They're usually living libraries, updated alongside the project being built with it.
So, about the buttons. You have four examples, but they're all styled the same. 3 of them are basically the same length, so they're not providing extra information, they're just taking up space. One short, one long demonstrate how the button expands with more text. You probably want to show a minimum, typical, and maximum stretched version. But more importantly, show your variations on the style.
soft marten
Here are the questions I'm left with looking at the style guide:
Colors - when should I use them? What is intended for backgrounds, or emphasis? What do they each contribute to the system. Same with strokes, when do I used 1px vs. a 3px stroke? What elements should have strokes and what color should those strokes be? Also why are the colors ovals?
Typography - this is just a list of things. What typeface is for headers vs. body vs. caption. What is the maximum type size I should use? Why are we using 3 sans serifs? and 2 of them look so similar that they would be indistinguishable to most users.
Buttons - can buttons only be white? What is the white circle supposed to be? Why are some white but then the +- are black? What about other button states like focus, hover, error, and disabled?
Icons - are these the only icons? Why do they look nothing like each other? What is the intended style in case I need to design more?
General - why is the background magenta? It hurts my eyes. Why is the type label for buttons and icons twice that for typography and colors?
signal sigil
Yeah I understand the background was an issue. I just changed it. Do you think I can explain all of this when I paste it in my case study and explain the details by writing a couple of sentences?
I will also have to organize it a lot more though.
pearl sapphire
Explain all what?
signal sigil
Like all of the details of the style guide I made in separate paragraph of my case study.
pearl sapphire
You shouldn't be writing a case study before you're done the work. A case study is literally a study of the work and process; it's retrospective. You can document as you go, but if you're just focused on building the report on the outcome, you're not learning the lessons of the process.
If you are doing the work and learning as you go, the case study will come naturally afterward, as you will have all of that ingrained knowledge to share.
Does that make sense? It feels like you're focused on the wrong thing.
There's no shortcuts to this, you have to do the work to get the experience and knowledge.
And a style guide is useless if the audience doesn't get anything out of it. So, no, you absolutely cannot just explain stuff in the case study. A style guide is its own self-explanatory document. One should walk away from it with a solid understanding.
signal sigil
I get what you mean. I am just trying to do my own projects and make updates to old ones. The demand for designers is going up but so many hrs dont want to give anyone a chance like me who is a recent college grad. SMH. I am just look at my resume and portfolio to see what I need work on. That being bettering my ux process and making apps better. But Hrs drive me crazy with so many rejections and ghosting. 😕
And with everything I did so far I have been learning just trying to find ways to make things better.
austere forum
Shaunak, I remember this case study and I remember the feedback wasnt that you needed a style guide but rather the design and story telling yourself
you really have to actually do work that aligns back to the feedback instead of just "doing work" for the sake of doing work and then wondering why its not working
pearl sapphire
Yes, the job market is frustrating. And it's great that you're trying to improve. But heed people's advice. Try to understand what they're telling you. It seems like you're doing stuff in a blind panic, but you're just running in circles.
signal sigil
Yeah, Kenny advice has helped me out. I am focusing on figuring out with each ux process not to be so general and talk about "why do what you do and what you gained out of it and how it connects to another ux process"
pearl sapphire
When I saw that magenta background again, I felt like Gordon Ramsay seeing a chef fall back to the same old mistakes, instead of doing the work and learning the lessons they need to.
austere forum
if you dont understand the advice defintely ask but sometimes it feels like you either are misunderstanding it or disregard the advice for now...
and really trying to help and ensure your success here
pearl sapphire
Yeah, we're here for you. Take the time to do it right, we'll be patient.
signal sigil
Okay I dont mean to get you guys upset or angry. LOL. I am still learning as I go. And you are right Phil in a way I have been in a panic with hrs not giving me a chance.
pearl sapphire
Not angry, just confused.
A huge problem I see is your focus. Your aim here is to make case studies. That's causing huge problems in your actual design work. You need to focus on doing good design work, then in a few months, when you've created a few good pieces, then you can worry about the case studies on them.
The better the work, the easier the case study will be when you get to it.
But you can't do good work if you're always focused on a different product. You're being impatient with yourself and the actual work that you're supposed to be highlighting.
signal sigil
Yeah say that again. Hrs have been driving me crazy. Like I told you. First time I experience so much heat of rejections and ghosting which annoys me.
austere forum
Once you update the work and the quality the interviews will come
focus on the work (what Phils trying to remind you)
not the interviews
pearl sapphire
Yeah, focus on the thing in front of you.
pearl sapphire
It would probably be worth it to start from scratch, instead of picking up old projects to refresh them. It feels like with each project you're trying to paint over old mistakes, but you keep missing things. If you start over, you can learn from old mistakes and not commit them again. You'll make new mistakes, but you can work on those as you go.
old folio
Yeah say that again. Hrs have been driving me crazy. Like I told you. First time...
Getting rejected and ghosted sucks and it is incredibly annoying. In an ideal world, it would be great to know why we didn't get the job or the interview. But it is part of the process and the best thing you can do is use that energy as motivation to improve.
pearl sapphire
How ya feeling, @signal sigil ?
signal sigil
LOL I am good
I get what you guys are saying. I need to focus on understanding whatever I am doing rather then making a check list. I do ask questions when ever I am stuck but I dont mean to misunderstand any of the advice you guys mention.
austere forum
not really about the checklist part cause a checklist is super broad like...
oh wait i mightve misread
yes youre right focus on what your goal and figure our what is not working instead of just moving towards a checklist and doing
signal sigil
Yeah but I dont really mean to purposefully misunderstand you guys.
I also dont want to ask so many questions. I also need to figure out things on my own
while trying to understand the advice you guys provide me
pearl sapphire
Yeah but I dont really mean to purposefully misunderstand you guys.
No, of course not. Asking questions, and coming back to them shows your willingness to learn. Sometimes we do things we don't recognize in ourselves and it takes others to point them out. I've seen friends spiral in panic and it's just unproductive toward their goal.
pearl sapphire
I also dont want to ask so many questions. I also need to figure out things on m...
Please, ask away. It's a big part of learning. Knowing what to ask is also really important.
austere forum
I agree with Phil Id rather you ask questions and actually be on the same page instead of making assumptions
pearl sapphire
I possibly (probably) overwhelmed you with feedback, previously, instead of pointing out a number one priority that needed to be taken care of. That doesn't help if you're already feeling pressure and panic. So, if that happens, you're also always in your right to be like, "Whoa, whoa, okay, one thing at a time."
signal sigil
LOL I am good.
But yes please one thing at a time.
That is what I have been doing. I am focusing on making small improvements to understand and learn which will lead me to make things better.
pearl sapphire
Remember that as much as you are alone in your process now, when you work with a team you're always getting instructions and feedback. So you can learn stuff on your own now, but you can also rely on others to help you learn.
austere forum
overall regarding the styleguide I think all the advice Phil and Ben gave are great advice follow that
just remember, does the styleguide help you tell your story?
if not maybe u dont need to do it
right now for your case study personally I dont see how its going to help it
signal sigil
Okay so I never got to say this and this is beyond then just a check list
austere forum
because the work thats mainly needed imo is the stuff thats in the styleguide (not the styleguide but what makes it up)
the compoents and process and layout
yes you shouldnt be just making a checklist
and going off and saying oh i dont have a style guide yet
i guess i should go make one
make one if you need it
pearl sapphire
And, you need a style guide if:
- You have a brand, but are having trouble keeping it cohesive, and need to work that out;
- You designed a brand for someone else, and you need to pass it on to them with instructions to ensure they maintain that brand; or
- You're working with other people on the same brand, and you all need to keep it consistent
If you're making a style guide 'cause it's a line item on a job description, you need a better reason, a more you-centered motivation to do it properly. Survival is not a great motivation for thoughtful design.
austere forum
Phil phrased it super well... see how this aligns with the questions Ben asked in here?
#880807285885116476 message
signal sigil
Yes makes sense now.
Again I am not trying to include every single ux process of humanity. LOL. If there is a ux process that I see that can work well and makes sense for the project then I would use it. I guess I just need help if I am applying things in the correct way. And tell "why I did what I did and what was the result and not be so general". Just trying to learn and figure out how I can always better my ux process and tell a better story.
soft marten
I had a meeting, but everyone gave good advice. @pearl sapphire I was also definitely having a Gordon Ramsay moment lol
Was definitely too harsh, and I appreciate how everyone got to the root of the problem (that you need to clarify the function and direction that you're working) vs. the immediate "this style guide needs a lot of help"
pearl sapphire
@signal sigil I think investing some time in understanding colour theory, and putting together some colour schemes, would greatly benefit you.
Even if it's just putting rectangles of colour together to see how they interact, and how changing out one colour or another affects that.
Eventually it becomes second nature.