style guide web design - New Videos

Using Style Guides in Web Design - Workflow of Modern web Design course

Channel: LearnUXID & Total View: 4236


Add Date: March 4, 2017, 1:35 am & Duration: 00:08:08


Likes: 64 | Dislike: 5


Tags:

design, tutorials, beginner, ui design in photoshop, Learn Photoshop, ui design course, web design course, mobile app design course, modern web design, latest web design, style guide, style guide in Photoshop, creating style guides, style guide tutorial, style guide webdesign, style guide web design

This is a Free lesson from my course on Udemy "Workflow of Modern web Design- from Sketching to Style Guides", I have covered a pro level process of Responsive Web design using design frameworks like Atomic Design and 8-Point Grid System
You will learn about design briefs, Wireframing, extracting project information, ideation, mood boards, style guides and Prototyping.
Tools you will learn to use during this course are Balsamiq Mockups, Adobe Photoshop, Zeplin and Invision App.
So if you really want to get closer to the process used in Startups and Web Design agencies, this course is going to help you learn that.

$10 Discount Course Link → http://bit.ly/workflow10
-------------------------------------------------------------
Facebook Page→ https://www.facebook.com/learnuxid
-------------------------------------------------------------
Website Link → http://learnuxid.com

How to Design a Website - The Style GuideHow to Design a Website - The Style Guide
00:05:39March 25, 2016, 6:44 pm
How to Design a Website - The Style Guide

Channel: Alessandro Castellani & Total View: 4117


Add Date: March 25, 2016, 6:44 pm & Duration: 00:05:39


Likes: 98 | Dislike: 0


Tags:

design, tutorial, how to, website, colours, brand identity, style guide

Design Factory #4
How to Design a Website - The Style Guide

Google Fonts: https://www.google.com/fonts
Adobe Kuler (Color CC): https://color.adobe.com/

:: Support Me ::
http://www.alecaddd.com/support-me/

:: Tutorial Series ::
WordPress 101 - Create a theme from scratch: http://bit.ly/1RVHRLj
Learn SASS from Scratch: http://bit.ly/220yzmZ
Create a Premium WordPress Theme: http://bit.ly/1UM80mR

:: My Website ::
http://www.alecaddd.com/

:: Follow me on ::
Twitter: https://twitter.com/alecaddd
Google+: http://bit.ly/1Y7sunz
Facebook: https://www.facebook.com/alecadddpage

Creating a style guide for...Everything!Creating a style guide for...Everything!
00:12:01June 24, 2014, 7:38 am
Creating a style guide for...Everything!

Channel: Google Developers & Total View: 25641


Add Date: June 24, 2014, 7:38 am & Duration: 00:12:01


Likes: 173 | Dislike: 36


Tags:

io14, iobyte, design, media, mtv, jsassoon, msui, product: youtube, fullname: other, Location: other, Team: Other, Type: DevByte, GDS: Full Production

As YouTube approaches its 9th birthday, we finally created a comprehensive style guide. What took us so long? Join us as we talk about what it actually takes to define a brand book and style guide for a product that is defined by the entire world of content and arguably one of the most complex user-interface problems out there. As YouTube is finally coming into its own as a streamlined user experience, it's expressing its own unique brand voice while still managing to be a service for anyone, anywhere.

Top 11 Guidelines for Web Design.Top 11 Guidelines for Web Design.
00:10:38November 6, 2015, 10:03 am
Top 11 Guidelines for Web Design.

Channel: Colt Petty & Total View: 656


Add Date: November 6, 2015, 10:03 am & Duration: 00:10:38


Likes: 4 | Dislike: 0


Top 11 Guidelines for Web Design.

[Tutorial] How to create a Style Guide?[Tutorial] How to create a Style Guide?
00:19:05February 4, 2016, 2:21 am
[Tutorial] How to create a Style Guide?

Channel: Frontify & Total View: 9819


Add Date: February 4, 2016, 2:21 am & Duration: 00:19:05


Likes: 42 | Dislike: 3


Tags:

brand guidelines, corporate identity guidelines, design style guide, UI element library, Frontify

In this tutorial you'll see how you can create a free & beautiful style guide with Frontify: https://www.frontify.com/styleguide

- Brand / Corporate Identity Guides
- Design Style Guides
- UI Element Library

Website Standards and Best PracticesWebsite Standards and Best Practices
00:09:04October 6, 2016, 1:17 pm
Website Standards and Best Practices

Channel: Weboq & Total View: 3181


Add Date: October 6, 2016, 1:17 pm & Duration: 00:09:04


Likes: 40 | Dislike: 3


Tags:

Website Standards, web site best practices, web design standards, brand style guide, font standards for websites, brand colors for websites, web style guide

Find out the latest Website Design Standards and Best Practices in Web Design. Top 10 Standards for Website Design. Best Practices such as Responsive and Mobile Friendly Design for Websites. Brand Style Guide, Font Standards and Color Consistency.

Examples of Coded Online Style Guides - Workflow of Modern Web Design Course

Channel: LearnUXID & Total View: 577


Add Date: March 4, 2017, 1:42 am & Duration: 00:03:52


Likes: 6 | Dislike: 1


Tags:

design, tutorials, beginner, ui design in photoshop, Learn Photoshop, ui design course, web design course, mobile app design course, style guides, using style guide, style guide in web design, style guide example, modern web design, latest web design, create style guide

This is a Free lesson from my course on Udemy "Workflow of Modern web Design- from Sketching to Style Guides", I have covered a pro level process of Responsive Web design using design frameworks like Atomic Design and 8-Point Grid System
You will learn about design briefs, Wireframing, extracting project information, ideation, mood boards, style guides and Prototyping.
Tools you will learn to use during this course are Balsamiq Mockups, Adobe Photoshop, Zeplin and Invision App.
So if you really want to get closer to the process used in Startups and Web Design agencies, this course is going to help you learn that.

$10 Discount Course Link → http://bit.ly/workflow10
-------------------------------------------------------------
Facebook Page→ https://www.facebook.com/learnuxid
-------------------------------------------------------------
Website Link → http://learnuxid.com

Improving Web and Mobile App Typography - 5 basic guidelines

Channel: Sketch Together & Total View: 27589


Add Date: January 3, 2017, 7:29 am & Duration: 00:06:49


Likes: 1133 | Dislike: 10


Tags:

ui design, ux design, user experience, tutorial, walk-through, how-to, graphic design, user interface, typography, fonts, typefaces

One of my goals this year is to digest important concepts in design and then try to explain them in a concise, easy-to-follow format. My first attempt is on typography. I studied from the best and I was able to list five essential principles to improve the typographic quality of your web and mobile app products in this video. I hope you like it—your feedback would be greatly appreciated.

Here are five essential practical guidelines to improve your typographic quality of your web and mobile product designs.

1. Start by choosing your body text typeface.
2. Try to avoid mixing typefaces.
3. Watch your line length.
4. Balance line height and point size.
5. Use proper Apostrophes and Dashes.

I plan to go more into detail in a crash course on typography that I’ll publish here. We’ll talk about the difference between typefaces and fonts, how to choose the right type, where to discover good typography, pairing typefaces, and more conceptual stuff. In the meantime, check out these awesome resources:

RESOURCES:

To find fonts for the web and mobile apps
https://typekit.com/
https://fonts.google.com/

Typewolf, a great source of inspiration and resources
https://www.typewolf.com/

Design Review Session 6 → Improve your Color Schemes and Web Design

Channel: LearnUXID & Total View: 429


Add Date: December 9, 2017, 1:02 am & Duration: 00:17:14


Likes: 11 | Dislike: 0


Tags:

webdesign, website design, Photoshop, Photoshop for Beginners, User Interface design, ui design in Photoshop, web design, Adobe Photoshop, adobe photoshop course, webdesign in photoshop, improve color scheme, color scheme web design, color scheme photoshop, beginner design mistake, beginner design blunder, beginner web design

I teach about UI Design to more than 20K students. Take my 11 hour Photoshop UI Design course → http://bit.ly/uidesigncourse
Start your career as a UI Designer, learn about Photoshop, Typography and Web Design Workflow

In this video, you will learn what beginner designer makes mistakes and how to improve your color schemes as color scheme in web design is very important. Color scheme can effect your whole UI or Web Design
--------------------------------------
Other UI Design Courses $10 discount link

Typography for Designers & Developers - Don't suck at design (video course)
http://bit.ly/typographycourse

Workflow of Modern Web Design - From Sketching, Style Guide, Wireframes and Prototype
http://bit.ly/workflow10

Design Launcher App icons for IOS and Android Devices
http://bit.ly/icondesign10

Ultimate Freelancing guide for Designers and Developers
http://bit.ly/freelanceahsan

---------------------------------------------------------
Facebook Page→ https://www.facebook.com/learnuxid
---------------------------------------------------------
Website Link → http://learnuxid.com

Create a Style Guide for Your BrandCreate a Style Guide for Your Brand
00:04:10July 29, 2015, 3:00 am
Create a Style Guide for Your Brand

Channel: Becky Kinkead & Total View: 17401


Add Date: July 29, 2015, 3:00 am & Duration: 00:04:10


Likes: 340 | Dislike: 28


Tags:

graphic design, graphic design vlog, graphic design vlogger, brand, brand identity, style guide, Video Blog (Website Category), Style, blogger, diy, creative business, being boss, becky kinkead, karen kavett, william patterson, style guide tutorial, style guide for brand, how to style guide, make a style guide, download style guide, logo design, brand identity design

Learn about creating a style guide for your brand. Ps - thanks for 1k!

Learn more about design: http://kinkeaddesigns.com/

VIDEO MENTIONS:
Marriage Equality Logo Edits: http://www.buzzfeed.com/jarrylee/beautiful-rainbow-brand-logos-celebrating-marriage-equality#.snVeZ418p
Urban Outfitters Logo Process: http://identitydesigned.com/urban-outfitters/

SOCIALS:
Twitter: https://twitter.com/becky_kinkead
Instagram: https://instagram.com/becky_kinkead/

Subscribe for design, business + branding videos: http://goo.gl/4oPFcZ

Hello there! I’m Becky Kinkead. I design for business owners and content creators who want to upgrade their brand presence & grow their online business: http://kinkeaddesigns.com/about/

5 Best Practices for Designing a Timeless Website5 Best Practices for Designing a Timeless Website
00:03:11February 27, 2017, 12:23 pm
5 Best Practices for Designing a Timeless Website

Channel: Bluehost & Total View: 35754


Add Date: February 27, 2017, 12:23 pm & Duration: 00:03:11


Likes: 111 | Dislike: 20


Tags:

Bluehost, Bluehost.com, host, hosting, web host, web hosting, web, website, server, web server, online, webhosting, webhost, website tips, website help, video, website work, web design, website design, design, good design, timeless design, website navigation, navigation, home page, homepage, features, responsive, responsive design, mobile, mobile friendly, brand

[http://blue.host/4pzM309pAs3] First impressions go a long way, and that applies to your website too. If it looks dated, visitors might think your site and business are behind the times. But if it’s too trendy, you run the risk of not being taken seriously. Ideally, your site features a timeless design that is clean and focused on usability. These five guidelines will help you get your site in that sweet spot.

1. CHOOSE STANDARD DESIGN FEATURES — Obviously, you want your site to stand out and not look like every other site on the web. However, embracing a traditional design will make it easier for users to navigate your site. Your logo should be at the top of the page so guests know they’ve come to the right place. And make it clickable so it doubles as an easy way to get to the homepage. Include a “Contact” button so potential clients know how to reach you. If they have to go searching for a phone number or email address, they might just move on to the next option.

Keep your site’s navigation at the top of the page. Another key function to include is a search feature. Lastly, create a customer mailing list by adding a signup box in the footer so people can subscribe for email updates.

2. BUILD A STRONG HOME PAGE — You only have a...

How to Create a Brand Style GuideHow to Create a Brand Style Guide
00:17:33April 17, 2015, 3:43 am
How to Create a Brand Style Guide

Channel: Frontify & Total View: 7168


Add Date: April 17, 2015, 3:43 am & Duration: 00:17:33


Likes: 25 | Dislike: 2


Tags:

brand guidelines, branding guidelines, brand style guide, Brand, Style Guide

Learn in this tutorial how to create a brand style guide with Frontify. Create your Style Guide for Free: https://www.frontify.com/styleguide
Content:
00:00 - Introduction: http://youtu.be/Be1Ov2OT32A
01:14 - Editing in Frontify: http://youtu.be/Be1Ov2OT32A?t=1m14s
02:06 - Upload a Logo: http://youtu.be/Be1Ov2OT32A?t=2m06s
02:28 - Add Content (Section, Callout, Text): http://youtu.be/Be1Ov2OT32A?t=2m28s
04:39 - Add Images: http://youtu.be/Be1Ov2OT32A?t=4m39s
05:28 - Add Colors, Palettes & Scales: http://youtu.be/Be1Ov2OT32A?t=5m28s
08:59 - Add Typo, Fonts & Styles: http://youtu.be/Be1Ov2OT32A?t=8m59s
14:01 - Add Icons: http://youtu.be/Be1Ov2OT32A?t=14m01s
15:01 - Add Image Grids: http://youtu.be/Be1Ov2OT32A?t=15m01s
16:25 - Add Attachments: http://youtu.be/Be1Ov2OT32A?t=16m25s
16:38 - Add Media Blocks: http://youtu.be/Be1Ov2OT32A?t=16m38s

More about Frontify: https://www.frontify.com

Zeplin Demo: Creating a Style Guide (for Developers)

Channel: Product Design Online & Total View: 579


Add Date: January 2, 2018, 9:16 pm & Duration: 00:01:53


Likes: 8 | Dislike: 0


Tags:

zeplin, design, sketch, tutorial, demo, invision, prototyping, mac, photoshop, music, apple, review, designer

It can become cumbersome to create a style guide when developing the web or mobile apps.

Fortunately, Zeplin gives you the ability to quickly add colors and fonts to a style guide that can be used in your development efforts.

Zeplin will automatically suggest fonts and colors based on your design mockups. You will be able to add all of them, or you can choose and pick which colors and fonts you want to be in your style guide.

The style guide can be changed at any time throughout the existence of the Zeplin project.

Download Zeplin at https://Zeplin.io

Product Design Online
------------------------
• You Should Get More Design Resources: https://ProductDesignOnline.com

• View the Full List of Product Design Online Courses: https://ProductDesignOnline.com/courses/

• See What Kevin’s answering on Quora: https://www.quora.com/profile/Kevin-Kennedy-131

• You Should Join the Product Design Online Community on Facebook: https://www.facebook.com/groups/380079659073406/

Please LIKE, COMMENT, and SUBSCRIBE if you found this video helpful.

Sketch - Style Guide - Part 1Sketch - Style Guide - Part 1
00:28:05February 21, 2017, 9:10 am
Sketch - Style Guide - Part 1

Channel: Alex Myers & Total View: 1789


Add Date: February 21, 2017, 9:10 am & Duration: 00:28:05


Likes: 8 | Dislike: 3


Sketch - Style Guide - Part 1

YOW! West 2017 Andy Clarke - Designing inspired style guides

Channel: YOW! Conferences & Total View: 580


Add Date: June 11, 2017, 5:10 pm & Duration: 00:39:55


Likes: 7 | Dislike: 1


Tags:

YOW!, Andy Clarke, Style Guides, Design, Documentation, Guidelines, YOW! West

“Style guide” is an umbrella term for several types of design documentation; static style or visual identity guides, voice and tone, front-end code guidelines or component/pattern libraries. These all offer something different but often have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.

In this fast-paced talk, Andy will demonstrate ways to improve how style guides look and make them better at communicating design information to creatives without it getting in the way of what technical people need.

Andy Clarke is one of the best known web designers because of his design work and contributions to the web design industry. He’s given more than sixty presentations at conferences all over the world. As well as numerous articles in web design publications, he’s written three books on website design and development including Transcending CSS and Hardboiled Web Design. He recently relocated from the UK to Sydney to head the design team at ansarada. Andy also hosted four video titles for New Riders Press in 2008/2009: Inspired CSS: Styling for a Beautiful Web, Designing web accessibility, Designing with CSS and Designing with microformats.

For more on YOW! West, visit...

Web Style Guide Basic Design Principles for Creating Web Sites

Channel: daa fefe & Total View: 5


Add Date: April 4, 2017, 2:56 am & Duration: 00:00:24


Likes: 0 | Dislike: 0


Web Style Guide Basic Design Principles for Creating Web Sites

Workflow of Modern Web Design from Sketching to Style Guides Online Course

Channel: LearnUXID & Total View: 749


Add Date: March 3, 2017, 12:12 am & Duration: 00:02:54


Likes: 16 | Dislike: 0


Tags:

design, tutorials, ui design in photoshop, Learn Photoshop, ui design course, web design course, mobile app design course, online web design course, modern web design, web design workflow, wireframing, ideation, style guide, web style guides, design brief, mood boards, prototyping, invision app, balsamiq mockup, creating wireframe, responsive web design, designing with art boards, artboards in photohsop, webdesign with artboards

This is a Promo Video from my course on Udemy "Workflow of Modern web Design- from Sketching to Style Guides".
In this online course, I have covered a pro level process of Responsive Web design using design frameworks like Atomic Design and 8-Point Grid System
You will learn about design briefs, Wireframing, extracting project information, ideation, mood boards, style guides and Prototyping.
Tools you will learn to use during this course are Balsamiq Mockups, Adobe Photoshop, Zeplin and Invision App.
So if you really want to get closer to the process used in Startups and Web Design agencies, this course is going to help you learn that.

Take my course for ONLY $10
Discount Course Link → http://bit.ly/workflow10
-------------------------------------------------------------
Facebook Page→ https://www.facebook.com/learnuxid
Website Link → http://learnuxid.com
Course Link → http://bit.ly/youtube10code
Facebook Page→ https://www.facebook.com/learnuxid

Putting Together a Brand Style Guide from Start to Finish

Channel: Lauren Hooker & Total View: 1650


Add Date: February 23, 2017, 5:59 pm & Duration: 01:03:37


Likes: 24 | Dislike: 0


Consistency is key to creating a streamlined, professional brand. But it’s difficult to create consistency if you don’t have a homebase for all of your brand standards (like your logo variations, color values, fonts, graphic style, etc.)

That’s where a brand style guide comes in.

In this week’s Ellechat, graphic designer Melissa Yeager is joining me to teach you how to maintain visual consistency and display professionalism through every detail of your brand by creating a brand style guide.

You can’t be too advanced or too novice for this Ellechat. Join us!

BLOG: elleandcompanydesign.com/
INSTAGRAM: instagram.com/laurenelizhook/
TWITTER: twitter.com/LaurenElizHook
FACEBOOK: facebook.com/elleandcompanydesign
PINTEREST: pinterest.com/laurenehooker/

Web Design Style GuideWeb Design Style Guide
00:01:37November 1, 2016, 8:00 am
Web Design Style Guide

Channel: Rebecca Smallfoot & Total View: 5


Add Date: November 1, 2016, 8:00 am & Duration: 00:01:37


Likes: 0 | Dislike: 0


Tags:

Animated Clip, Free animation software, Animated Videos, Free Presentation software, Animated Presentation, Make your own animation, Presentation software, Explainer video, PowToon

-- Created using PowToon -- Free sign up at http://www.powtoon.com/youtube/ -- Create animated videos and animated presentations for free. PowToon is a free tool that allows you to develop cool animated clips and animated presentations for your website, office meeting, sales pitch, nonprofit fundraiser, product launch, video resume, or anything else you could use an animated explainer video. PowToon's animation templates help you create animated presentations and animated explainer videos from scratch. Anyone can produce awesome animations quickly with PowToon, without the cost or hassle other professional animation services require.

What Is a Style Guide? | Graphic DesignWhat Is a Style Guide? | Graphic Design
00:02:17June 12, 2013, 8:10 am
What Is a Style Guide? | Graphic Design

Channel: HowcastTechGadgets & Total View: 6111


Add Date: June 12, 2013, 8:10 am & Duration: 00:02:17


Likes: 53 | Dislike: 3


Tags:

Logo, typography, composition, branding, graphic design, gfx, video graphics, website design, visual communication, communication design, visual arts, page layout, interface design, graphic design tutorial, graphic design career, howcast, style guide

Watch more How to Have a Career in Graphic Design videos: http://www.howcast.com/videos/509224-What-Is-a-Style-Guide-Graphic-Design



So what is a style guide? A style guide is a guide made by designers, usually for either other designers or other people within an organization to know how to use the assets that have been designed for that company. In which case, now we'll take a look at Skype's branding guideline.

So, a guideline or a branding guideline, also known as a style guide, also known as an asset guideline. There's so many different names that it has, but what it does is it actually tells a story. It tells you how the logo came about, how to use their logo, what not to use their logo on.

So, for this one, Skype says the dos and the don'ts, where don't put red behind it because there's no red in the Skype logo. Or don't change the orientation. Don't put a drop shadow. It also tells you what typefaces they use. They use different ones like Arial, Tahoma and on Mac they use Helvetica and Lucida Grande and then they also tell you which colors that they also use as well.

A style guide is important because it helps keep your brand consistent. It lets your customers know that you care and it lets your designers know also...

#5 Styleguide using frontify#5 Styleguide using frontify
00:10:40March 26, 2016, 2:10 am
#5 Styleguide using frontify

Channel: UX Knowledge Sharing & Total View: 1883


Add Date: March 26, 2016, 2:10 am & Duration: 00:10:40


Likes: 10 | Dislike: 1


Tags:

styleguide, frontify, online styleguide, mohan munna, ux knowledge sharing, styleguide creation, branding, color palette

This video explains, how to create a styleguide using frontify web app. This is useful for designers and developers.

CSS Tutorial: Learn How To Style Website Using CSS Properties #6

Channel: 1stWebDesigner & Total View: 28615


Add Date: February 21, 2013, 6:32 am & Duration: 00:18:54


Likes: 107 | Dislike: 4


Tags:

Cascading Style Sheets (Programming Language), How-to (Website Category), Website (Industry), Tutorial (Media Genre), Tips, Web Design (Interest)

In this video we will learn to style a certain element or tag using CSS properties by changing width, height, colors, floats, etc. Using these basic properties we can turn our HTML markup into a well presented website.

Hope you enjoyed this tutorial!
Oh and if you want to go in depth, check this guide out (more than 12k word ultimate guide).
PSD to HTML Tutorial: The Only Guide You Need in 2015 - http://www.1stwebdesigner.com/psd-to-html/
-----

If you are enjoying these video series and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site - 100% Responsive & Flat - http://rockingcode.com/

You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website.

We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well!

What you are waiting for? Take your skills to the next level right now with http://rockingcode.com/

Web UI Style - Speed Art: Adobe XDWeb UI Style - Speed Art: Adobe XD
00:02:21January 18, 2017, 5:23 am
Web UI Style - Speed Art: Adobe XD

Channel: Matej Novak & Total View: 418


Add Date: January 18, 2017, 5:23 am & Duration: 00:02:21


Likes: 10 | Dislike: 0


Tags:

Speed Art, Adobe XD, Experience Design, art, design, Style, web, webpage

Web UI style guide, made with Adobe XD (Experience Design).

Free download (xd file): https://goo.gl/2fbQmu

/* You can help me with donation */
PayPal: https://www.paypal.me/MatejNovak/

~
http://matejnovak.si/
https://twitter.com/kravzlek/
https://instagram.com/kravzlek/
https://www.linkedin.com/in/kravzlek/

Website Design - Example Style Guide - Pitch VideoWebsite Design - Example Style Guide - Pitch Video
00:02:01September 10, 2017, 1:51 pm
Website Design - Example Style Guide - Pitch Video

Channel: Kyle J & Total View: 23


Add Date: September 10, 2017, 1:51 pm & Duration: 00:02:01


Likes: 0 | Dislike: 0


Tags:

website, web design, style guide, html, css, sass, ruby, scss, wcag, accessibility, typography, imagery, icongraphy, forms, buttons, color palette, responsive, scaling, website design, programming

An example pitch video for a website style guide

Bachelor of Computer Science

Brad Frost - Style Guide Best Practices - btconfBER2015

Channel: beyond tellerrand & Total View: 3132


Add Date: November 10, 2015, 7:58 am & Duration: 00:48:27


Likes: 48 | Dislike: 0


Tags:

style guides, styleguides, web design, btconf, brad frost

Title: Style Guide Best Practices

Description:
---------------
We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.
---------------

Talk & speaker bio:
http://beyondtellerrand.com/events/berlin-2015/speakers/brad-frost

MORE INFORMATION

Watch this little recap video to get an impression how beyond tellerrand events look like:
http://vimeo.com/69823900

Information about beyond tellerrand:
http://beyondtellerrand.com/
http://twitter.com/btconf

Atomize Design SystemAtomize Design System
00:04:45June 18, 2017, 11:00 pm
Atomize Design System

Channel: Akash Tyagi & Total View: 6263


Add Date: June 18, 2017, 11:00 pm & Duration: 00:04:45


Likes: 98 | Dislike: 5


Tags:

Atomize, Design System, framework, Sketch, Atomic design, web, styleguide, interface, Tutorial, dashboard

Atomize design system is a UI design framework for Sketch that helps designers and developers design well-structured, scalable and more consistent interfaces for the web. It is based on Atomic design methodology which has atoms and molecules as reusable building blocks.
Atomize can help design teams and individuals to define a unified design language and style guide for a product.

On dribbble: https://dribbble.com/shots/3574279-Atomize-Design-System
-------------------------------------------------------------------
Get it here: https://gum.co/atomize
-------------------------------------------------------------------

UPDATE: Atomize Design System is getting a major update very soon. Stay Tuned!

IDENTITY DESIGN: BRANDINGIDENTITY DESIGN: BRANDING
00:28:52November 25, 2014, 4:21 pm
IDENTITY DESIGN: BRANDING

Channel: The Futur & Total View: 395665


Add Date: November 25, 2014, 4:21 pm & Duration: 00:28:52


Likes: 5182 | Dislike: 222


Tags:

Brand, branding, brand identity, branding design, brand identity design process, brand design, identity design, business branding, branding process, brand identity design, brand identity techniques, branding your business, brand design tutorial, brand design process, branding identity, corporate identity, corporate identity design, visual identity design, identity design branding, branding documentary, design branding, visual identity, logo branding, brand design tips

👉Subscribe: https://goo.gl/F2AEbk

3 things you might not know about identity design and branding from Executive Creative Director Chris Do. Chris and Jose go over how the Ole's logo and new landing page was created by applying the CORE framework.

Annotations
--
01:36 Identity versus branding
04:28 Branding is only what others say/feel that you are
07:45 Think more, make less
09:43 How to define the brand
12:30 Putting together logo examples
13:59 Let's Design & Sketch
19:20 Common mistake: depending only on the computer
20:38 Find designers with a deep knowledge of a subject rather than do it yourself.
22:26 Working through logo examples, and hand off the example to your choice designer
26:45 Summary

Media Drop
--
The Brand Gap - Marty Neumeier
Story: Substance, Structure, Style, And The Principles Of Screenwriting - Robert McKee


Special Thanks to our Sponsors:

Shutterstock - http://www.shutterstock.com
Media Temple - http://mediatemple.net
This is Ground - http://thisisground.com

Links Discussed in This Episode:

CORE Really Explained: https://www.youtube.com/watch?v=e4BEt_o9bCk

CORE Brand Attributes...

Designing Inspired Style Guides - Talk.CSS #24 max-content Edition - SingaporeCSS

Channel: Engineers.SG & Total View: 71


Add Date: January 23, 2018, 9:15 am & Duration: 00:42:06


Likes: 0 | Dislike: 0


Speaker: Andy Clarke, @Malarkey

"Style guide" is an umbrella term for several types of design documentation; static style or visual identity guides, voice and tone, front-end code guidelines or component/pattern libraries. These all offer something different but often have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.

In this fast-paced talk, Andy will demonstrate ways to improve how style guides look and make them better at communicating design information to creatives without it getting in the way of what technical people need.

About the speaker:

Andy Clarke is one of the best known web designers because of his design work and contributions to the web design industry. He’s given more than sixty presentations at conferences all over the world. As well as numerous articles in web design publications, he’s written three books on website design and development including Transcending CSS and Hardboiled Web Design. In 2017 he relocated from the UK to Sydney to head the design team at Ansarada.

Event Page: https://www.meetup.com/SingaporeCSS/events/244533222/

Produced by Engineers.SG

Help us caption & translate this video!

Creating a Style Guide Site MapCreating a Style Guide Site Map
00:02:15August 11, 2017, 9:14 am
Creating a Style Guide Site Map

Channel: Bitovi UX & Design & Total View: 121


Add Date: August 11, 2017, 9:14 am & Duration: 00:02:15


Likes: 2 | Dislike: 0


Tags:

UI design, style guide, living style guide, code documentation, front end implementation, style guide generator

This video lesson is part of the tutorial "Creating a Living Style Guide". You can view the written tutorial at http://bit.ly/2kobCkc

------
About the Tutorial

The living style guide serves as a framework of definitions for UI elements (such as headings, lists, links, input controls, etc.) and as a library of components (such as navigation systems, toolbars, search tools, grid tables, etc.) that are available for use. This means that development is not started from scratch every time. Instead, it builds upon existing definitions in the UI system and contributes to it.

In this course, you’ll learn all about planning your style guide, creating pages and documenting stylesheets using the open source tool: DocumentCSS. See more at http://www.styleguidedrivendevelopment.com

Create a style guide in InDesign CCCreate a style guide in InDesign CC
00:16:07July 30, 2015, 12:31 pm
Create a style guide in InDesign CC

Channel: Kay Tappan & Total View: 9013


Add Date: July 30, 2015, 12:31 pm & Duration: 00:16:07


Likes: 28 | Dislike: 5


Tags:

Adobe InDesign (Software), style guide, brand standards guide, how to convert cmyk to rgb, cmyky and rgb, hex code, how to find hex code in photohsop

This tutorial shows how to create a style guide in Adobe InDesign CC for the VIC 3001 final project.

Brand Style Guide 101: What is a Style Guide|How Do They Function|How To Create|

Channel: The Realistic Viewer & Total View: 264


Add Date: June 7, 2017, 4:03 pm & Duration: 00:10:07


Likes: 9 | Dislike: 1


Tags:

The realistic viewer, educational video, Style guide 101, style guide branding, how to create brand style guide, style guide, What is a Style Guide, Brand Style Guide 101, designing, style guide tutorial, brand guideline design, corporate identity guidelines, brand anatomy, style guide coca cola, why a style guide is important, style guide color palette, style guide typography, style guide editorial, style guide tone of voice, style guide photography, style, guide, branding, brand

In this video we will be taking a look at style guides what are they, how do they function and what do you need to create your own. Creating a style guide is a great way to create overall consistency for your brand, personal or corporate find out how to create one and if you have any questions drop it down below!

A style guide is a set of standards in terms of the writing designing and presenting of a document, this is most commonly used for publications, organizations and fields, when building your brand or working together with external factor it will make it easier to communicate the values of the brand and the overall style.

Topics of discussion:
Color palette 1:29
Photography 2:55
Typography 4:33
Editorial 6:23
Tone of voice 8:08
Recap 8:57

Links talked about in the video:

The style guide from NASA: https://sservi.nasa.gov/wp-content/uploads/2011/10/NASA_Style_Guide_v2.1.pdf

Coca Cola guideline: https://issuu.com/logobr/docs/guideline_cc

Da font: http://www.dafont.com
-----------------------------------------------------
Increase your workflow on Youtube through Tubebuddy: https://www.tubebuddy.com/Realistic

Subscribe to Oneway-Fitness for health and...

How to Design a Professional Website in Sketch | Part 2: Style Tiles

Channel: Adam Rasheed & Total View: 2954


Add Date: December 28, 2015, 4:02 pm & Duration: 00:25:17


Likes: 27 | Dislike: 0


Tags:

sketch 3, style guide, web design, how-to

Video #2 of the the series.
In this video, you'll learn how to create a quick style guide for a web design project.

Get the Sketch files: http://adamrasheed.github.io/sketchsignup/

About us:

SpeedWealthy is a search engine focus on popular videos sharing websites like Youtube to find the best results for our visitors, SpeedWealthy is not hosting images or videos on our servers and the videos on SpeedWealthy is not owned by us and we don't take responsibility for any video on our website.

SpeedWealthy is focused on Bitcoin and How to make money from home keywords and we try our best to filter and make a better website for our visitors. If you see a video who promote a scam network please let us know via a comment to check it out. Thank you for join SpeedWealthy.com