Home
Search results “User interface style guides”
Using Style Guides in Web Design - Workflow of Modern web Design course
 
08:08
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
Views: 6090 LearnUXID
Creating a style guide for...Everything!
 
12:01
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.
Views: 27391 Google Developers
[Tutorial] How to create a Style Guide?
 
19:05
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
Views: 11597 Frontify
Design Systems, Pattern Libraries & Style Guides... Oh My!
 
09:40
Style Guides, Pattern Libraries, and Design systems are all anyone is talking about lately, and for good reason. They all share a similar goal of creating a more consistent design process that increases productivity and also effectiveness. Some people don’t know the difference, so let's break them all down. Remember to Subscribe https://goo.gl/6vCw64 /// Design system The comprehensive set of values, semantics, syntax, and context that form the foundation of a shared design language /// Style guide The physical or digital document that represents the styles, patterns, practices, and principles of a company/brand and teaches how to use it /// Pattern library An organized set of related, reusable components, often containing code examples, design guidelines, and use cases ////////////////// Style Guides Foursquare Style Guide https://playfoursquare.s3.amazonaws.com/press/foursquare-brandguide.pdf Animal PLanet Styles Guide https://logoblink.com/wp-content/uploads/2009/01/animal_planet1.pdf Barnes & Noble http://portacreativeserver.com/vault/manualescorporativos/BRANDBOOK%20BARNES%20&%20NOBLE.pdf ////////////////// Pattern Libraries Pattern Library https://natashahockey.github.io/pattern-library/ MailChimp Pattern Library http://ux.mailchimp.com/patterns Bootstrap http://getbootstrap.com/2.3.2/ ////////////////// Design Systems Shopify Polaris https://polaris.shopify.com/ Lightning Design System https://www.lightningdesignsystem.com Carbon Design System http://carbondesignsystem.com/ ////////////////// Helpful Links Atomic Design | Atomic Design by Brad Frost http://atomicdesign.bradfrost.com/table-of-contents/ Website Style Guide Resources http://styleguides.io/ Building a Visual Language – Airbnb Design https://airbnb.design/building-a-visual-language/ ------------------------------------------------------------------------------------ ////////// Sign up for my Monthly Newsletter http://jesseshowalter.com/newsletter ////////// Website http://www.jesseshowalter.com - ////////// Subscribe: https://goo.gl/6vCw64 - If you want to support the content I make and buy me a cup of coffee https://www.buymeacoffee.com/jesseshowalter ////////// Social Twitter: http://twitter.com/iamjesseshow Anchor: https://anchor.fm/iamjesseshow Instagram: https://www.instagram.com/iamjesseshow Medium: https://medium.com/@iamjesseshow - ////////// Equiptment https://www.amazon.com/shop/jesseshowaltertv
Views: 3225 Jesse Showalter
The Beauty of Living Style Guides
 
01:33
This video lesson is part of the tutorial "Creating a Living Style Guide". You can view the written tutorial at http://bit.ly/2koVkYl ------ 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
Views: 260 Bitovi UX & Design
Accessible Products & Guidelines | UX/UI Design | Product Design | Udacity
 
04:32
Learn from Udacity and Google in our FREE Product Design course and check out the Tech Entrepreneur Nanodegree program! ►►► http://bit.ly/Tech-Entrepreneur-Nanodegree ◄◄◄ ----------------------------------------­--------------------------------------------------- Built in partnership with Google, this program mixes theory and practice to show students how to transform ideas into market-ready products. ----------------------------------------­--------------------------------------------------- Product Design: Validation and UX through Design Sprints ----------------------------------------­--------------------------------------------------- ►►► http://bit.ly/Product-Design-Course ◄◄◄ ----------------------------------------­--------------------------------------------------- ● What's in the course? There is nothing more powerful than an idea whose time has come. This course is designed to help you materialize your game-changing idea and transform it into a product that you can build a business around. Product Design blends theory and practice to teach you product validation, UI/UX practices, Google’s Design Sprint and the process for setting and tracking actionable metrics. ● Why take this course? Over the years, Silicon Valley startups have developed a series of frameworks and best practices for product design. Through startup case studies and interviews with industry experts, we want to bring you the best of Silicon Valley with lessons you can apply to influence the design of your mobile or web app. By the end of the course, you will know how to perform a Google Design Sprint (developed at Google Ventures and exclusively taught in this course) to design, prototype and test your ideas. You will also learn to design low fidelity mockups for your product and capture appropriate metrics. ----------------------------------------­---------------------------------------------------- LESSON 2: UI/UX Design ● What's in the lesson? This lesson takes you beyond visual style to understand material design, building for accessibility, user flows and personas. You’ll hear about how startups make design decisions and learn from senior designers at Google on how they use design to emphasize the purpose of their products. By the end of the lesson, you will analyze the user experience of another product and start documenting a user flow for your own product. ----------------------------------------­---------------------------------------------------- Tech Entrepreneur Nanodegree Our Tech Entrepreneur Nanodegree program teaches you the skills you need to create your own revenue-generating app, and build a successful business around it. You’ll learn to succeed the Silicon Valley way! ----------------------------------------­---------------------------------------------------- ►►► http://bit.ly/Tech-Entrepreneur-Nanodegree ◄◄◄ ----------------------------------------­---------------------------------------------------- Udacity | Google | Tech Entrepreneur | Tech Entrepreneur Nanodegree | Product Design | Validation and UX through Design Sprints | UX/UI Design
Views: 2262 Udacity
Color & Character Styles Adobe XD Tutorial
 
05:20
In this tutorial we're going to take a look at Color Styles and Character Styles in Adobe XD. Symbols Tutorial: http://bit.ly/2egtlWT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 📦 Download UNLIMITED Assets for Designers Get access to over 600,000 ready-to-use photos, illustrations, templates, effects, fonts, brushes and more! https://goo.gl/V3VSe2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ⭐️ The BEST Web Design Tool for Designers Design responsive websites with powerful interactions, zero coding required, and it’s free to get started! https://goo.gl/gVd9a5 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 📚 The FUTUR of Education for Creative Professionals Learn the creative process and best practices from design professionals who charge $10k+ https://goo.gl/ZbzfsZ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Support me on Patreon https://www.patreon.com/foreverdansky Follow me on Instagram https://www.instagram.com/foreverdansky Say hi on Twitter https://twitter.com/ForeverDansky - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Tutorial Playlists Adobe Photoshop: https://goo.gl/4yQx1e Adobe Illustrator: https://goo.gl/rt3PFX Adobe InDesign: https://goo.gl/eZtdnR Adobe XD: https://goo.gl/UYAngG Adobe Premiere Pro: https://goo.gl/4XDHSF - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Views: 16757 Dansky
Symbols & Styleguides - Sketch Freebie Tutorial
 
29:47
Video Chapters: 0:00 - Introduction 0:24 - Get files 1:16 - Install Fonts 1:44 - Opening Files (Difference between Template file and Standard File) 2:38 - Administration Overview (2 Use Cases for the file) 3:50 - STEP 1 - Setup Colours 6:03 - STEP 2 - Change Typeface 8:35 - Changing only Semibold fonts (Problem when typeface doesn't have exact font-weights as the current one) 10:12 - STEP 3 - Active Items 11:53 - STEP 4 - Logo Symbols 14:01 - STEP 5 - Elements Corner Radius setup 17:20 - Setup your own button (through Nested Symbols) 22:01 - Setup your own elements - Remove Borders, Resizers etc. 22:53 - Setup your own input (through Nested Symbols) 24:33 - Add More icons (works for every other elements too) 27:06 - Quick overview of Auto-Updating Styleguides features 29:16 - Goodbye About Symbols & Styleguides: Let me present the smartest template and your future starting point for every User Interfaces in Sketch. Stop wasting your time by crafting the same design systems and elements from scratch over and over and over again - and let the magic of this template’s nested symbols begin! For even more info about all the details visit: http://symbols.janlosert.com Download link: https://gumroad.com/products/hvSQZ Twitter: http://twitter.com/janlosert Dribbble: http://dribbble.com/janlosert Instagram: http://instagram.com/janlosert/ PS: I'm not a video maker, so sorry for the bad quality of this video.
Views: 13402 Jan Losert
Web UI Style - Speed Art: Adobe XD
 
02:21
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/
Views: 496 Matej Novak
Simple style guides
 
05:43
Views: 14 Rahim UD-DIN
Better user experience with style guides and Atomic design - Sandra Granberg
 
21:07
Design consistent user experience by shifting focus from designing web pages to designing atomic design systems. With Style guides and Atomic design, every single piece of the user interface is considered individually to work beautifully regardless the device, screen size or scenario. This approach enable organisations to reach their goals in their digital transformation projects. Foo Café is an independent and physical meeting place for people of all backgrounds and expertise within the IT-industry in the Malmö/Lund region. Foo Café is aimed at those interested in sharing, learning and creating. Join the fun at foocafe.org
Views: 1249 FooCafe
Part 1 - Build a UI kit with styled-components
 
27:36
Let's use styled-components to create a shareable npm package to keep our UI consistent across multiple apps. Styled-components: https://www.styled-components.com/ Yarn: https://yarnpkg.com/ Create React App: https://github.com/facebookincubator/create-react-app NextJS: https://github.com/zeit/next.js/ GitHub: https://github.com/notrab/styledbyme-tutorial Twitter: https://twitter.com/notrab
Views: 6984 Jamie Barton
Workflow of Modern Web Design from Sketching to Style Guides Online Course
 
02:54
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
Views: 890 LearnUXID
Living Style Guides vs Traditional Style Guides
 
02:53
This video lesson is part of the tutorial “Using Style Guide Driven Development". You can view the written tutorial at http://bit.ly/2AVU0Tt ------ About the Tutorial The Style Guide Driven Development (SGDD) approach lays the groundwork for building more scalable and maintainable applications while providing a commonplace, a Living Style Guide for communicating with developers, designers, and stakeholders. In this course, you will learn what is exactly SGDD and why you should use it. We will drill down into the different parts of the process, along with examples and compelling arguments to get you and your team on board. Learn SGDD and bridge the gap between interface design and technical information and boost development time and team communication. learn more at http://www.styleguidedrivendevelopment.com
Views: 464 Bitovi UX & Design
Why Use Style Guide Driven Development?
 
03:14
This video lesson is part of the tutorial “Using Style Guide Driven Development". You can view the written tutorial at http://bit.ly/2AxI4Vp ------ About the Tutorial The Style Guide Driven Development (SGDD) approach lays the groundwork for building more scalable and maintainable applications while providing a commonplace, a Living Style Guide for communicating with developers, designers, and stakeholders. In this course, you will learn what is exactly SGDD and why you should use it. We will drill down into the different parts of the process, along with examples and compelling arguments to get you and your team on board. Learn SGDD and bridge the gap between interface design and technical information and boost development time and team communication. learn more at http://www.styleguidedrivendevelopment.com
Views: 230 Bitovi UX & Design
What Is a Style Guide? | Graphic Design
 
02:17
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 that you care about the work that you've done for them. That means not stretching their logo or not putting it against like, a flashing background, or not using the colors that were specifically chosen for your organization from your branding strategies. Style guides are really important because sometimes the same designer won't remain on for the project and the new designer needs to know how to treat certain things or where to find the files to do certain things that the website may need. It's important to include a style guide in your design because it shows that you're thinking ahead, and it shows that you have really put like, the thought and the care that goes into branding a company and making sure that you not only explain it, but respect it.
Views: 6730 HowcastTechGadgets
Creating a Page in a Living Style Guide
 
02:47
This video lesson is part of the tutorial "Creating a Living Style Guide". You can view the written tutorial at http://bit.ly/2jT6G36 ------ 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
Views: 69 Bitovi UX & Design
Examples of Modular User Interface Design
 
03:01
This video lesson is part of the tutorial “Designing in a Modular Way". You can view the written tutorial at http://bit.ly/2A7WGOe ------ About the Tutorial Modular design encourages us to think and design user interfaces and user experiences in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, the design process starts by first understanding the way the UI system is structured and which components that can be used to create the user flow. In this course, we will explore the concepts of modular design and their application to UI design. We will also delve into how you can create designs in a modular way and how you can use a living style guide to aide the process. See more at http://www.styleguidedrivendevelopment.com
Views: 797 Bitovi UX & Design
Zeplin Demo: Creating a Style Guide (for Developers) (Video)
 
01:53
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.
Views: 2078 Product Design Online
Design Systems and Their Benefits
 
02:59
Go beyond a brand or UX style guides to create engaging, consistent user interfaces. At the same time, fit design activities within in short development cycles, spending the least possible development time and money.
Views: 3081 NNgroup
How to Create a Brand Style Guide
 
17:33
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
Views: 8193 Frontify
Rehab Treadmill UX UI: Animated Style Guide & Prototype
 
08:42
In 2015 I was contract to create digital experience for an anti-gravity rehabilitation treadmill. This is the animated style guide deliverable which includes a rough demo of the in-session interface.
Views: 53 Bryce Thompson
Creating a Style Guide Site Map
 
02:15
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
Views: 162 Bitovi UX & Design
Installing the Sample Application to Create a Living Style Guide
 
02:59
This video lesson is part of the tutorial "Creating a Living Style Guide". You can view the written tutorial at http://bit.ly/2iWLYmn ------ 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
Views: 83 Bitovi UX & Design
Workflow of Modern Web Design from Wireframes to Style Guide : What are UI Style Guides?
 
07:27
http://ytwizard.com/r/7JFPz1 http://ytwizard.com/r/7JFPz1 Workflow of Modern Web Design from Wireframes to Style Guide Learn the modern process and tools of Responsive web design using Balsamiq Mockups, Photoshop, Zeplin and Invision App
Views: 36 Dr How
Best Practices on building a UI component library for your company (David Wells) - FSF 2016
 
44:20
Learn how to building an internal component library & style guide can help your company ship and iterate faster. This talk will cover how we created a scalable & maintainable UI library (http://ux.mulesoft.com) with ES6, React, and PostCSS for consumption across multiple product teams. About the speaker: TL;DR – Marketer turned developer + entrepreneur. Full stack javascript developer in San Francisco. Founded Inbound Now (now advisor), where he makes open source marketing software that runs on over 40,000 sites. Before that, he consulted with hundreds of companies helping them implement conversion optimization strategies to increase inbound web leads. You could call him a jack of all trades and a master of some. JavaScript, Node, HTML, CSS, Marketing, UI and UX are his jam. Talk given at Full Stack Fest 2016 (https://www.fullstackfest.com)
Views: 7157 Codegram Technologies
Crafting Front-End Style Guides (video)
 
02:20:37
Video Capture from the Crafting Front-End Style Discussion In most instances the word Style Guide conjures thoughts of a document outlining specs on things such as logo spacing, colors, and typography – all defined for a print medium. This type of document was never intended to be translated directly to the web; but when built and maintained for the web, it can make a site more performant, improve user experience, aid in onboarding new team members, and increase design and development efficiency. In this talk, Jana Veliskova and Brian Crumley will demonstrate how to find efficiency in building front-end design systems from a living Style Guide. What You’ll Learn - What is a Style Guide - What are the benefits of implementing a Style Guide - How to audit your existing site elements - What components can make up a Front-End Style Guide - Challenges in Implementing Style Guides / UI Toolkits in organizations - How to Overcome Challenges - Implementing Style Guides / UI Toolkits / Pattern - Libraries in new projects and established ones - Examples of Style Guides created by Jana and Brian - What resources are available for creating Style Guides
Views: 196 PANMA
Common Pitfalls of Using a Living Style Guide
 
03:14
This video lesson is part of the tutorial “Designing in a Modular Way". You can view the written tutorial at http://bit.ly/2AU2lqK ------ About the Tutorial Modular design encourages us to think and design user interfaces and user experiences in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, the design process starts by first understanding the way the UI system is structured and which components that can be used to create the user flow. In this course, we will explore the concepts of modular design and their application to UI design. We will also delve into how you can create designs in a modular way and how you can use a living style guide to aide the process. See more at http://www.styleguidedrivendevelopment.com
Views: 109 Bitovi UX & Design
Sketch Plugin ZeroHeight to Collaborate Design Style Guide
 
12:52
Sketch Plugin about ZeroHeight that helps us to make guidelines for design style by collaborating with another people like a Team or Personally. Why do you need to Subscribe my channel? 1. It's free (you just need the google mail account) 2. Up to date (every my videos in your mail) 3. Help me to grow up this channel 4. More subscriber = More events. 5. Subscribe channel Angga Risky :) Learn Android with my friend: 1. Robby Dianputra: https://www.youtube.com/channel/UCoAtRuBwX_I2kFiUoTVgUmQ Follow Me :) dribbble: dribbble.com/anggarisky behance: behance.net/anggarisky facebook : @anggariskys twitter: @anggariskys google+: plus.google.com/+anggariskysetiawan instagram: anggariskysetiawan website: www.anggarisky.com
Views: 665 Angga Risky
What is Style Guide Driven Development?
 
03:03
This video lesson is part of the tutorial “Using Style Guide Driven Development". You can view the written tutorial at http://bit.ly/2jjMb02 ------ About the Tutorial The Style Guide Driven Development (SGDD) approach lays the groundwork for building more scalable and maintainable applications while providing a commonplace, a Living Style Guide for communicating with developers, designers, and stakeholders. In this course, you will learn what is exactly SGDD and why you should use it. We will drill down into the different parts of the process, along with examples and compelling arguments to get you and your team on board. Learn SGDD and bridge the gap between interface design and technical information and boost development time and team communication. learn more at http://www.styleguidedrivendevelopment.com
Views: 1082 Bitovi UX & Design
Digital Style Guides: Mini-Lesson - "UI & Front-End Architecture for Style Guides"
 
29:46
There are many pieces and parts that make up Digital Style Guides, one that is often looked in conversations is the architecture of the framework and toolkit. This video is an overview of the Front End Architecture that Kevin Mack and Eric Katz of Cardinal Solutions Group use on their projects for crafting large-scaling component libraries. • Eric Katz on Twitter: https://twitter.com/ericnkatz • Kevin Mack on Twitter: https://twitter.com/nicetransition • Reference to Open Source Projects: https://www.youtube.com/watch?v=Ddw0WbRbzUU
Views: 223 Kevin Mack
How to use Styles in Craft by InVision | Sketch 3
 
06:58
http://www.LearnSketch.com - We've already got a big update for the Craft plugin suite from the folks over at InVision Labs. It automates some of the most basic and time consuming tasks that disrupt the creative process. Now we can automatically create style guides instantly. - Take my complete Sketch course on Udemy for 50% off: https://www.udemy.com/learnsketch3/?couponCode=youtube50 - Then download my entirely free Sketch resources at: http://www.LearnSketch.com -
Ui Style Guide Examples
 
00:35
Views: 14 Adney Vega
Jina Bolton - Designing a Design System
 
40:31
Product Design for web and mobile is evolving at a fast pace. As the range of devices and platforms continues to expand, so do the various design considerations. Design systems help a design team build a framework that meets their needs by bringing together all of the critical design components - including style guides, pattern and UI libraries, CSS frameworks and other resources. In this session, Jina, a Lead Designer on the Design Systems team at Salesforce UX, will share: * Strategies for how to approach, design and build an effective design system * How to successfully maintain the system to ensure ongoing usefulness * Elements that design systems need to be sustainable that are critical for success
Designing Mobile View of Website - Planning Grid and guides in Photoshop
 
04:42
This is a Free lesson from my course on Udemy "Workflow of Modern web Design- from Sketching to Style Guides", $10 Discount Course Link → http://bit.ly/workflow10 --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. ------------------------------------------------------------- Facebook Page→ https://www.facebook.com/learnuxid ------------------------------------------------------------- Website Link → http://learnuxid.com
Views: 4109 LearnUXID
Creating Sections in a Living Style Guide
 
03:32
This video lesson is part of the tutorial "Creating a Living Style Guide". You can view the written tutorial at http://bit.ly/2ip9tAK ------ 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
Views: 49 Bitovi UX & Design
How to create a style guide in Sketch using templates (Part One)
 
02:27
There are a lot of style guide hosting options for designers right now, Brand.ai, Invision Craft, etc. If you're wondering which system in the best I recommend that while you do that research, you try this simple method for creating a super lightweight style guide using Sketch. Once you push the limits of this approach then you'll know exactly what you need in a more feature rich system. Let me know in the comments below if this approach is helpful and if there are any critiques or other angles worth mentioning! Get more: Design: http://design.tobysilverman.com Photography: http://tobysilverman.com Medium: https://medium.com/@TobySilverman Instagram: https://www.instagram.com/toby_silverman Twitter: https://twitter.com/TobySilverman
Views: 1346 Toby Silverman
Digital Branding in a Component Library: The Style Guide Layers
 
57:48
Presentation from 2016 M3 Conference: August 5, 2016 | The Ohio Union Creating a component library is not a new piece of the development and design process but with the growth of responsive and contextual factors it has become a requirement for complex systems. Digital Style Guides bring alignment of teams and solve complexities by providing quality tested interface components that are reusable across all projects. Within this presentation, we will discuss not only what makes a successful component library but how your brand can evolve within the digital space with a Style Guide. Presented by Kevin Mack Additional Resources: • Digital Style Guides: Mini-Lesson - "Creating Core Reusable Components": https://www.youtube.com/watch?v=-hJsaW-xTOc • Digital Style Guides: Mini-Lesson - "Typography for Digital Branding: Object-Oriented Typography": https://www.youtube.com/watch?v=SThueNEcJFs • Digital Style Guides: Mini-Lesson - "Media, Imagery, and Assets": https://www.youtube.com/watch?v=28-XbcFc8-w • Digital Style Guides: Mini-Lesson - "UI & Front-End Architecture for Style: https://www.youtube.com/watch?v=_pms44zwiQ0 ABOUT KEVIN MACK Kevin is the Creative Director for Cardinal Solutions Group where he focuses on digital strategy, branding, and creative-based solutions. His background includes creating user experiences around web interfaces and the crafting of large-scaling websites and applications. Kevin is the co-founder and organizer of The Columbus Web Group http://columbuswebgroup.com where he actively participates in growing and educating the community around design, development, best practices and standards for the web. You can find him on Twitter (@nicetransition), YouTube https://goo.gl/jrHuQH, CodePen http://codepen.io/nicetransition/, or GitHub https://github.com/kevinmack18 [Apologies for the hiccups in the video, it was due to an issue when video format changed]
Views: 242 Kevin Mack
Advantages of Using a Living Style Guide
 
02:05
This video lesson is part of the tutorial “Designing in a Modular Way". You can view the written tutorial at http://bit.ly/2jhuJsR ------ About the Tutorial Modular design encourages us to think and design user interfaces and user experiences in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, the design process starts by first understanding the way the UI system is structured and which components that can be used to create the user flow. In this course, we will explore the concepts of modular design and their application to UI design. We will also delve into how you can create designs in a modular way and how you can use a living style guide to aide the process. See more at http://www.styleguidedrivendevelopment.com
Views: 138 Bitovi UX & Design
The Hour of Design - Ep. 7 - Ride W/ Me Style Guide Pt 2
 
01:08:42
**AGENDA:** https://www.evernote.com/l/AT74hbod4upAw7gMMQbmM5DBli_Y0et_8d4 Ricardo Vazquez (UI Designer, Mozilla Webmaker) invites you to join him for the Hour of Design. In this session, Ricardo will share his screen and design live, with you as the audience. The purpose of this event is to demystify the process of design, and share how even the most beautiful designs always start out with a blank canvas.
Views: 267 Ricardo Vazquez
Modular vs Homogenous Design
 
02:00
This video lesson is part of the tutorial “Designing in a Modular Way". You can view the written tutorial at http://bit.ly/2AZhaIV ------ About the Tutorial Modular design encourages us to think and design user interfaces and user experiences in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, the design process starts by first understanding the way the UI system is structured and which components that can be used to create the user flow. In this course, we will explore the concepts of modular design and their application to UI design. We will also delve into how you can create designs in a modular way and how you can use a living style guide to aide the process. See more at http://www.styleguidedrivendevelopment.com
Views: 205 Bitovi UX & Design
[JSConfUS 2013] Nicole Sullivan: Creating Living Style Guides
 
34:27
Can style guides lead to better UI code? Better performance? Yes, absolutely. In this talk, Nicole will show you how she and her team collaborated with Trulia engineers and designers to create a living style guide. She'll also share some yummy data about how that affected real user measurements.
Views: 7105 JSConf
Making Your Designs Modular
 
02:35
This video lesson is part of the tutorial “Designing in a Modular Way". You can view the written tutorial at http://bit.ly/2nuKlh7 ------ About the Tutorial Modular design encourages us to think and design user interfaces and user experiences in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, the design process starts by first understanding the way the UI system is structured and which components that can be used to create the user flow. In this course, we will explore the concepts of modular design and their application to UI design. We will also delve into how you can create designs in a modular way and how you can use a living style guide to aide the process. See more at http://www.styleguidedrivendevelopment.com
Views: 175 Bitovi UX & Design
Blender Beginner Tutorial - Part 1: User Interface
 
16:04
Blender tutorial for complete beginners! How to use the most common functionality of Blender: Modelling, Materials, Lighting Watch Part 2: https://youtu.be/s05DiCEDVGE?list=PLjEaoINr3zgHs8uzT3yqe4iHGfkCmMJ0P Get the Blender Keyboard Shortcut PDF: https://mailchi.mp/ef5b15a32043/subscribe-to-the-newsletter
Views: 1918301 Blender Guru