How a style guide can help you design your website and logo

Transcript: It's this let me explain it all right pitch this Ben burns and I were talking about how the how we speak differently about design since I went to a design school got my formal training and you pick up all the Arts speak you learn how to present just by watching other people present and though Ben has a media arts degree it wasn't as concentrated so we thought it would be fun to introduce a new segment that we'll be rolling out every once in a while well we'll do as Ben will be showing a frame he'll have a few minutes to think about it and then he will present it to me how we're a critique it in terms of his presentation and then I will pitch it back to him and so you guys can see how we talk about design work a little bit differently yeah and it's definitely something that I've struggled with you know that learning the visual vocabulary right is really if you don't go through a fine arts program it's very difficult to pick up kind of organically because these are words that you rarely use and so as I... See more →

Key quotes:

• "UI style guides help create consistent HTML, CSS, and JavaScript code so front-end developers can follow the same standards designers do."
• "In their case study for creating a style guide, FamilySearch’s designer Steven Lambert shared a picture of all the colors they’ve been using on the website before the audit."
• "Main typography characteristics you want to include in a style guide are font, hierarchy, size, weight, line height, letter-spacing, color."
• "Here are some recommendations that will make your typography guide useful and pleasing: Icons help your design communicate common ideas via visual cues."
• "Instead of giving tips on brand vision, it offers designers different filters to put on top of photos to create a cohesive look."
• "Flip through the demo document to have an idea about the style guide you can create with SC5."

Transcript: He folks and welcome to this video on brand identity guidelines or as they're sometimes called logo guidelines now I have actually done a video on this subject and you can find it on my youtube channel but since posting the video up I've had multiple requests from people for me to run through an actual set of brand identity guidelines so that you can see exactly what I was talking about in the previous video so let's just get straight to it okay folks so here we can see the cover page for the brand identity guidelines for Delonte and this was a project I did in conjunction with the profitable firm who specialize in working with accountancy firms so let's move into the document itself so we've got a very brief introduction just seeing what the purpose of the guidelines are and then another few paragraphs just talking about how your brand shouldn't be compromised and how these guidelines will ensure that that's the case and then we're on to the logo design itself so here we have the Delonte logo shown in its primary colors and then on the next page we have the logo as it... See more →

Key quotes:

• "I gradually discovered that the best way to achieve project uniformity is by creating design documentation, or style guides."
• "A styleguide is a set of standards, principles and rules every developer or designer should follow in order to improve the digital presence of the product."
• "To set up a grid you will need to take in consideration certain mandatory aspects like container, units, number of rows and columns, margins and gutter."
• "The result look like this: Be it black, white, or any other color that inspires you, the white space represent according to Mark Boulton, the empty space between the elements of your designed website."
• "Make sure you bring in front details like hierachy, weight, line-height, letter-spacing and include examples of usage in your product."
• "Designing the components of your product can solve common issues like navigation, CTA buttons, form elements, modals, notifications and so on."

Key quotes:

• "To make the work of designers and developers easier, it’s wise to keep all the rules that determine the key elements of the website in one place — we’re talking about the style guide for the visualisation of the website."
• "When the website is finished, we usually have to deal with various corrections or additional subpages and since you may not be the only one who is designing the page, it’s easy for other designers to pick up where you left off with the help of the style guide."
• "When we choose all of the above, it’s important to determine the line height, character spacing, paragraphs, the color of body text, quotes, the emphasized parts, different links, etc."
• "On our website we also need to determine a grid for the content and other elements, such as pictures and graphics."
• "It’s important to decide on the effects for the buttons and other animations for the page; it helps us create a meaningful story while we’re making the style guide for our company’s website."

Key quotes:

• "A design style guide can furnish your group with the tools to all the more likely keep up your brand’s picture, and give your site’s clients a reliable content."
• "In this article, we’ll talk about what top website designing company style guide and why it’s essential to your site."
• "Any elements related to client interactions, including live visits and structures, likewise affect how customers feel about your brand."
• "Having a brand style guide for your site keeps all colleagues on the same page about how to introduce your content to the world."
• "Where your guidelines will live is up to you, yet recall that a style guide is most helpful when it unmistakably imparts your requirements and is easily accessible to any individual who needs to utilize it."
• "It’s likewise brilliant to utilize your brand’s tone and voice to make the guide itself."

Key quotes:

• "‍This moodboard by Studio-JQ combines different logos, color combinations, and imagery to encapsulate and present visual ideas for a new web design."
• "A style tile provides a visual guide for the website’s various design components including: In collaboration with the client, refer back to the words that inspired the moodboard and any other thematic ideas it may have generated."
• "Then create a(t least one) style tile using the moodboard and the list of words to inform a collection of colors, typography, buttons, and other navigational elements that could potentially become part of the design."
• "Whether it’s a button with a fancy hover state, or a creative way of revealing different types of content, element collages show the client how things will work when the site is live."
• "During the visual design stage you’ll be: But before you get to all that, you’ll want to translate your style tile work into real HTML/CSS for use on the site."