Home
Search results “Sketch create style guide”
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: 15921 Jan Losert
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: 10766 Jesse Showalter
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: 2451 Toby Silverman
creating well structured text styles in sketch
 
18:40
tutorial, how to create well structured text styles in sketch, using find and replace plugin and sketch styles Generator plugin. Have fun :) Plugins: Find and Replace for Sketch https://github.com/thierryc/Sketch-Find-And-Replace Sketch Styles Generator: https://github.com/lucaorio/sketch-styles-generator sourcefile: https://www.dropbox.com/s/jln27cz32jcijqw/180316_textstyles.sketch?dl=0 our company: https://www.diva-e.com/
Views: 6546 diva-e sketch tricks
Atomize Design System
 
04:45
Atomize is the most advanced UI Design System for Sketch that helps designers create well structured and scalable interfaces for the web. The system is based on Atomic Design methodology which has atoms and molecules as foundational building blocks. UPDATE 2018: Atomize 2.0 is now available. To know more visit: http://atomizedesign.com/ ------------------------------------------------------------------- Get it here: https://gum.co/atomize -------------------------------------------------------------------
Views: 12032 Akash Tyagi
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 -
Creating a Design System Library in sketch
 
37:03
Tutorial how to create a Design System Library in sketch app, use shared text styles in Library with sync styles plugin, creating icons with multiple sizes and color overrides and dynamic Buttons. This tutorial shows how i create a library with some nice tricks in sketch and which plugins i use for it. Have Fun. SOURCE FILE: https://www.dropbox.com/s/j4u1dqjx2ete9z3/TEST_TEST.sketch?dl=0 Download plugins: RENAME IT: https://github.com/rodi01/RenameIt SKETCH STYLES GENERATOR: https://github.com/lucaorio/sketch-styles-generator SKETCH STYLE LIBRARIES: https://github.com/sigtm/sketch-style-libraries SKETCH ICONS: https://github.com/AMoreaux/Sketch-Icons MOVE TO LIBRARY: https://github.com/ahmedmigo/Move-to-library-sketchplugin LIBRARY SOMBOL REPLACER: https://github.com/zeroheight/library-symbol-replacer PADDY PLUGIN: https://github.com/DWilliames/paddy-sketch-plugin our company: https://www.diva-e.com/
Views: 18222 diva-e sketch tricks
How to Start Sketch Design Project in 4 Steps
 
11:54
This Sketch-App tutorial video will show you that how to start new project with SKETCH by following 4 Steps, you will learn Grid, Branding, Symbols, Management & More… ► FOLLOW ME ON INSTAGRAM: https://www.instagram.com/fazurrehman/ ► SUBSCRIBE FOR MORE VIDEOS: http://bit.ly/mrfaiz ► BUY MY DESIGN STUFF: https://goo.gl/i3EQPf People Always start the new project about Website or Web Design, App Design or something else and most of the day they don’t follow any grid system or they even don’t know what type of framework they are going to use for development. So, I am going to give you 4 Steps guidance to starting your new design project. - Grid System: 00:36 - Branding Colors | Typography | Icons | Spacing: 01:34 - Create Symbols & Styles: 04:06 - Project Management & Structure: 09:46 - Sketch Pro Tip: 08:40 Some Free Sources to help in your sketch design project ► Google Fonts: https://fonts.google.com/ ► Colors: https://coolors.co ► Icons: https://www.flaticon.com ► Bootstrap Grid: https://sketchrepo.com/free-sketch/bootstrap-4-grid-freebie/ GET IN TOUCH TO DISCUSS YOUR NEW PROJECT: 📩 [email protected] MUSIC I USED: https://soundcloud.com/dixxy-2/cool-nights LET'S CONNECT INSTAGRAM: https://www.instagram.com/fazurrehman TWITTER: https://twitter.com/fazurrehman FACEBOOK: https://www.facebook.com/itsfaizur WEBSITE: http://www.faizurrehman.me TOOLS I USED: Camera: iPhone 7+ Mic: Rode Videomic Editing Tool: Adobe Premiere Pro Hi New Subscriber 🙏, I'm Faizur Rehman, Live in India and I make tutorials on Design, Code, Tips & Hacks & Oh, I also VLOG.
Views: 4090 Faizur Rehman
Using Colors and Graphic Styles on Sketch 3
 
07:18
Part of a series on Sketch 3 Basics. Full list here: https://www.youtube.com/watch?v=cEplnCnZuDM&list=PLWlUJU11tp4fEXI8deWhBQAHDv9R23WHB Resources: https://www.dropbox.com/s/vq9wxeyegpupslu/Sketch%20Class.sketch?dl=0
Views: 16537 Sketch Together
Using Text Styles on Sketch 3
 
03:16
Part of a series on Sketch 3 Basics. Full list here: https://www.youtube.com/watch?v=cEplnCnZuDM&list=PLWlUJU11tp4fEXI8deWhBQAHDv9R23WHB
Views: 18822 Sketch Together
How to Design a Professional Website in Sketch | Part 2: Style Tiles
 
25:17
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/
Views: 3093 Adam Rasheed
How to work with grids and design responsively
 
13:07
Working with grids and designing responsively in Sketchapp has never been easier. In this lesson I cover how to create and manage grids for large, medium and small devices whilst running through an example of how this correlates to classes you'll use in your code. Full course: https://uxclub.com/courses/ux-tools-sketch-part-2 Twitter: https://twitter.com/uxclub Facebook: https://facebook.com/theuxclub
Views: 28491 UXClub.com
How to create a style guide in Sketch using templates (Part Two)
 
03:10
A couple additional tips and tricks for using Sketch templates to host your style guide. Set up text styles and color swatches for easy access to your styles. From Part One: 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: 700 Toby Silverman
Style Overrides in Symbols using Sketch 52
 
08:08
Pablo Stanley’s Video: https://youtu.be/_bjqVF7Fvg4 Follow us for more free tutorials and tips: https://www.appdesigntips.com https://www.facebook.com/appdesigntips https://twitter.com/appdesigntips https://www.instagram.com/appdesigntips/
Views: 9395 App Design Tips
Design a Website Landing Page in Sketch (Tutorial) 🖥
 
38:27
Sketch is a powerful application created specifically for design. In this video I walk you through some of the features Sketch has to offer and why it is the preferred software to use for designers. As a demonstration I create a fictitious website landing page that has an adventure/lifestyle look and feel. JUMP TO A SEGMENT IN THE VIDEO: Insert an Art-board: 2:35 Create a Grid: 3:20 Build a Navigation Header: 4:40 Create Navigation Link Text Styles: 9:22 Design a Hero Slider: 13:35 Design a Content Section Using Symbols: 25:33 Add a Testimonials Section: 34:25 Support me on Patreon: https://www.patreon.com/codybrowndesign WEBSITES FEATURED https://www.sketchapp.com https://burst.shopify.com/ https://hipsum.co/ https://magdeleine.co/ MUSIC Cody G: Ukulele and Chill https://soundcloud.com/gudgeoncody Towser: Again and Again https://soundcloud.com/twsr Made in M: Chinua https://soundcloud.com/madeinm Emune: Paraiso https://soundcloud.com/emune Basic Jo: I Like U https://soundcloud.com/basicjo/i-like-u Jinsang: Pine Leaves https://soundcloud.com/jinsangbeats Eets: Hawthorne https://soundcloud.com/eetsstee Keep the Cipher: Blossom https://soundcloud.com/keemthecipher Philanthrope: Real Estate https://soundcloud.com/philanthrope1 Enjo: Ride Out https://www.youtube.com/watch?v=iNL0Ylm-68E Mndsgn & Sofie: Abeja https://soundcloud.com/stonesthrow/mndsgn-sofie-abeja THE GEAR I USE ►►► CAMERAS Sony a6000: http://amzn.to/2z9RzbK Iphone 7: http://amzn.to/2jOF5DT ►►► LENS Sony 16-50mm: http://amzn.to/2iGmiXI ►►► TRIPODS Manfrotto Mini Tripod: http://amzn.to/2zbv5Y8 Manfrotto Photo Tripod: http://amzn.to/2zedfU0 ►►► MICROPHONE Blue Spark: http://amzn.to/2iIOxVZ ►►► LIGHTING Natural Light from the good ol' sun Cody Brown Design is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites. ►►► CODY BROWN DESIGN APPAREL Rise Shine Design Tee: http://codybrowndesign.storenvy.com/ WHAT TO EXPECT FROM THIS CHANNEL: Every week, I will publish meaningful & concise content that provides insight into the field of graphic design, web design, illustration, branding, app design, & other creative areas I find important in my field as a commercial artist. This media includes software tutorials, lifestyle vlogs, and other useful videos to help and inspire anyone looking to improve their skills as a creative badass and take their creativity to new heights. ABOUT ME: Hey there, I’m Cody. A craft-beer drinking Designer & Art Director living in San Diego, Ca. I’ve been designing professionally for the last 6 years and have learned quite a bit along the way. Throughout my career as a creative I’ve had the pleasure of designing for a number of incredible brands & creative agencies. From working with a variety of clients and organizations, my style can been seen as eclectic and constantly evolving, much like a chameleon. In the world of commercial arts I’ve had to get out of my comfort zone and adapt to the brands and tasks at hand. I like to think that my personal aesthetic is contemporary and minimal combing modern techniques with classic design elements. SKILLS Some of the skills I’ve acquired throughout my journey as a creative: Art & Creative Direction Styling Graphic Design Branding & Identity Design Web Site Design (optimized for mobile & tablet) App Design Photography Illustration Image Manipulation Typography & Lettering Motion Graphics Video Production & Editing Animation MY STUFF Website: http://www.codybrowndesign.com Dribble: https://dribbble.com/codybrown23 Behance: https://www.behance.net/codycanvas Instagram: https://www.instagram.com/mistercodybrown
Views: 62872 Cody Brown
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 ►SUBSCRIBE for high-quality Fusion 360 tutorials! http://bit.ly/sub-right-now My CAD setup: http://bit.ly/cad-setup MY WEBSITE: www.productdesignonline.com ____________________________________________ 2 FREE MONTHS OF SKILLSHARE: http://bit.ly/skillsharePremium-discount MY FACEBOOK: http://bit.ly/PDO-Facebook MY INSTAGRAM: http://bit.ly/view-my-insta FUSION 360 TRICKS: http://bit.ly/fusion-360-tricks ABOUT ME: I'm Kevin Kennedy, a Product Designer, and Fusion 360 evangelist! I upload 2 times a week, Tuesdays & Fridays at 5PM central time (most of the time). Be sure to subscribe for high-quality Fusion 360 videos and check out ProductDesignOnline.com for more Fusion 360 tricks and tips! Disclaimers: Links in the description are typically affiliate links that let you help support the channel at no extra cost. — #zeplin
Views: 4819 Product Design Online
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: 8740 LearnUXID
Sketch like an Architect (Techniques + Tips from a Real Project)
 
08:09
Follow along as I work through a few rough sketches for a new project; I discuss the key style points and techniques you can use to develop your own architectural sketching style. Each sketching vignette includes many tips, but broadly they fall under the following headings: 1) Simply your toolset: fewer tools = fewer decisions 2) Start small: move quickly, be less precise, less precious 3) Line work: architectural sketching is a line art, not a fine art 4) Annotations: helps create a layered esthetic, describes things you're not able to easily show 5) Media + Implements: how changing these from time to time can spur new ideas. 6) Practice: the one thing guaranteed to improve your architectural sketching technique. **Here's the link to GET INVOLVED in my NEW PROJECT: http://thirtybyforty.com/new-project // GEAR I USE // CAD DRAWING TEMPLATE: * Download here: http://thirtybyforty.com/autocad-template ARCHITECT'S TOOLKIT: * Architect + Entrepreneur Startup Toolkit: http://thirtybyforty.com/SPL ARCHITECTURE ESSENTIAL TOOLS: * http://thirtybyforty.com/archi-gear PHOTOGRAPHY GEAR: *http://thirtybyforty.com/my-photo-gear MUSIC I USE: * http://thirtybyforty.com/music #architecture #architect #architecturetutorial -~-~~-~~~-~~-~- Please watch: "Making a Site Model - The Outpost Project" https://www.youtube.com/watch?v=VsJrDScS5ZI -~-~~-~~~-~~-~-
Views: 593456 30X40 Design Workshop
Intro to Sketch - Beginners guide to Sketch Basics |
 
15:32
Sketch for Mac one of my favorite digital design software of all time. If you're just starting out with Sketch or debating on whether you should make the switch this tutorial is for you. LIKE FREE STUFF? //////////// If you're interested in my thoughts and experience on the topic download my free ebook called "Make Your Portfolio Count" http://eepurl.com/djC53b Remember to Subscribe https://goo.gl/6vCw64 I have been using Sketch for over 2 years full time in my design work and I realized I have never done a basic intro to Sketch that covers all the topics a beginner would need to understand the Sketch basics. So here it is Sketch for Beginners... a sort of 101 class so to speak. In this video, I cover all the basics you would need to know you start using Sketch for Mac today in your professional design work. By the time you're done watching the video, you should be able to download the program, install, start making amazing things, and wonder why you ever waited to make the switch.If you are still using something like Adobe Photoshop for digital design it's time for you to experience something better. In this video I cover: - Benefits to using Sketch - Brief tour of the UI - Artboards - Setting up a grid - Working responsive - Pages vs Artboards - Adding Shapes - Details panel - Setting up text styles - Using symbols - Alignment, Measure & Adjustment tools - Plugins - Exporting I know it sounds like a lot but stick with me and hopefully, you'll learn everything you need to know to starting making amazing designs in Sketch. My Favorite Sketch Plugins: http://sketchrunner.com/ https://www.invisionapp.com/craft https://github.com/thierryc/Sketch-Find-And-Replace https://medium.com/sketch-app-sources/merge-duplicate-symbols-in-sketch-24772e9b7f0 https://rodi01.github.io/RenameIt/ https://github.com/utom/sketch-measure https://github.com/andrewfiorillo/sketch-palettes https://github.com/Tallwave/sketch-spellcheck-all-layers https://github.com/sonburn/symbol-organizer ------------------------------------------------------------------------------------ ////////// Website http://www.jesseshowalter.com - ////////// Subscribe: https://goo.gl/6vCw64 - ////////// Social Twitter: http://twitter.com/iamjesseshow Anchor: https://anchor.fm/iamjesseshow Instagram: https://www.instagram.com/iamjesseshow Medium: https://medium.com/@iamjesseshow - ////////// Equiptment Vlogging Camera - Panasonic G85 http://amzn.to/2EwumHn - Drone- DJI Spark http://amzn.to/2CpodH9
Views: 164929 Jesse Showalter
#5 Styleguide using frontify
 
10:40
This video explains, how to create a styleguide using frontify web app. This is useful for designers and developers.
Views: 3042 Mohan Madheshwaran
New from Craft—Styles, a free tool to generate beautiful style guides with a click
 
01:17
We're excited to share Styles, our newest Craft plugin. It's a tool that generates a stunning, comprehensive, and synced style guide within Sketch with just a click. Get Craft for free: http://labs.invisionapp.com/craft --- InVision is the world’s leading product design collaboration platform, trusted by more than 1.5 million designers at companies like Uber, Netflix and Twitter. InVision empowers teams of all sizes to prototype, review, iterate, manage and test web and mobile apps—all without a single line of code. Get InVision free forever: http://invs.io/1QOCxZq --- See who else uses InVision: http://invs.io/1QOD5P3 Stay up to date on the latest trends in product design: http://invs.io/1QOD91g Follow InVision on Twitter: http://twitter.com/InVisionApp/
Views: 8321 InVision
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: 29583 Google Developers
Creating Mood Boards for Web Design - Workflow of Modern Web Designer course
 
06:22
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. 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
Views: 2445 LearnUXID
my Favorite sketch plugins#2 Styles Generator Plugin
 
07:39
In this sketch tutorial, i introduce the sketch app plugin "Styles Generator".It's the perfect plugin to generate multiple Styles by just one klick. Hope you find this video tutorial useful. Let me know which plugins you don't want to miss in your daily design process.. Cheers Jon ------------------------------------------------------------------------------------------------------ ////////// Download Plugin https://github.com/lucaorio/sketch-styles-generator ////////// Source file https://www.dropbox.com/s/6bxgytmvuptixn3/Styles-Generator-plugin.sketch?dl=0 ////////// Social Twitter: https://twitter.com/sketch_tricks Facebook:https://www.facebook.com/sketchapptut... ////////// Our Company Web: https://www.diva-e.com/ Instagramm: https://www.instagram.com/divaemuenchen
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: 1313 Angga Risky
Creating Style Guide With Webflow
 
05:17
Flux is proudly sponsored by Webflow, start a new account with an awesome discount: http://bit.ly/FluxWebflowDiscount - Gear & Book Recommendations: http://bit.ly/2ohFOuj - Currently working on: http://www.goprospero.com http://www.thenuschool.com - Join the Flux community on Patreon: https://www.patreon.com/flux_ransegall - Music by: Krooked Drivers - Do Your Thang https://soundcloud.com/krooked-drivers/do-your-thang - Twitter: http://twitter.com/ransegall Instagram: https://www.instagram.com/ransegall/ - Work Hard & Be Nice Poster: https://society6.com/ransegall
Views: 3656 Flux
How To Build a Design System | UXPin
 
20:34
In this video I will teach you how to build a UX Design System using the UX Pin prototyping & design platform. In the video I talk about the individual elements that make up a UX Pin Design system, such as Colours, Typography, Iconography, Photography and UI Patterns. ____ IF YOU LIKE MY VIDEOS, HERE ARE SOME NEXT STEPS... 1) FREE EBOOK: "How to start a career in UX" https://bit.ly/2xuYDDE 2) FREE PORTFOLIO REVIEW: Get my thoughts on your portfolio... https://bit.ly/2KuhpxM ____ Check out my social for more UX tips: Instagram: https://www.instagram.com/robertsmith.co/ Twitter: https://twitter.com/robertsmith_co
Views: 22450 Robert Smith
Putting Together a Brand Style Guide from Start to Finish
 
01:03:37
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/
Views: 3117 Lauren Hooker
How To Create A Killer Brand Manual Or Brand Style Guide - The Brand Builder Show #30
 
13:54
One of the most important brand assets for any company is their brand manual or brand style guide document. Being consistent in brand messaging is crucial to the growth and success of a brand. And a brand manual or brand guide does the job of ensuring this consistency. Read the full article at https://www.spellbrand.com/brand-manual-brand-style-guide The case study mentioned in the video: http://www.spellbrand.com/portfolio/autism-sensory-products-brand-strategy-branding-website ============ Thank you for watching this video. I hope that you keep up with the daily videos I post on the channel, subscribe, and share your learnings with those that need to hear it. Your comments are very important to me, so please take a second and say ‘Hey’ ;). Please subscribe to our Youtube channel: https://www.youtube.com/subscription_center?add_user=UCmVbvYtA8a__4P-7YXk9bIA Mash Bonigala is a specialist in Positioning Strategy, Brand Identity & Inbound Marketing, helping entrepreneurs and start ups build robust brands and increase revenues. In this channel he shares videos on strategy, design and marketing including tips, advice, rants and more. ============ GET BRAND STRATEGY ADVICE If you would like Mash to discuss your brand strategy and give you actionable insights on how you can brand to the next level, book an hour with him at https://clarity.fm/mashbonigala ============ Follow Me Online Here: Instagram: http://instagram.com/bonigala Facebook: http://facebook.com/mashbonigala Website: https://www.spellbrand.com Twitter: http://twitter.com/bonigala Medium: http://medium.com/@bonigala Check out my podcasts: iTunes Podcasts: https://itunes.apple.com/gb/podcast/the-brand-builder-show/id936840388?mt=2 Watch my weekly live stream: https://www.youtube.com/c/Spellbrand/live ============ BONUSES: Download The FREE 70+ Page EBook (Worth $79) That Will Enable You To Manage A Successful Brand! - https://www.spellbrand.com/unltimate-guide-successful-branding-inbound-age Download THE eBook that will enable you to launch a successful clothing brand! - https://www.spellbrand.com/8-steps-to-launching-clothing-brand/
Sketch + Invision UX Design: Create an Interactive Sitemap!
 
15:47
In this video, I show you how to create an interactive, clickable sitemap prototype using Sketch & Invision. Sitemaps are organized lists or flow chart diagrams that shows connections between web pages, web page trees, and website content. A visual sitemap is a very effective method for both planning and communicating ideas about a website’s structure. As a 2D representation of a website, sitemaps allow designers and developers to efficiently plan website projects by offering a bird’s-eye view of the entire project at one time. Sitemap Sketch Template: https://bit.ly/2SxuWLa Craft for Invision: https://www.invisionapp.com/craft Email: [email protected]
Views: 668 JP Design Academy
Rick and Morty Style Guide | Rick and Morty | Adult Swim
 
02:43
Rick and Morty Full Episodes: http://asw.im/2WWsNy Discover the do's and don'ts of drawing Rick and Morty with art director Jeffrey Thompson. SUBSCRIBE: http://bit.ly/AdultSwimSubscribe About Rick and Morty: Rick and Morty is Adult Swim's most scientifically accurate animated comedy. Created by Justin Roiland and Dan Harmon, it catalogues the bizarre misadventures of a bored scientific genius/drunkard and his socially awkward grandson, Morty. Their exploits tend to have unintended consequences for Morty's dysfunctional family, especially his unfailingly mediocre father, Jerry. Watch Rick and Morty battle everything from interdimensional customs agents to Cronenberg monsters now, only at http://AdultSwim.com. Watch More Rick and Morty: http://bit.ly/RickandMorty About Adult Swim: Adult Swim is your late-night home for animation and live-action comedy. Enjoy some of your favorite shows, including Robot Chicken, Venture Bros., Tim and Eric, Aqua Teen, Childrens Hospital, Delocated, Metalocalypse, Squidbillies, and more. Watch some playlists. Fast forward, rewind, pause. It's all here. And remember to visit http://AdultSwim.com for all your full episode needs. We know you wouldn't forget, but it never hurts to make sure. Connect with Adult Swim Online: Visit Adult Swim WEBSITE: http://bit.ly/ASWebsite Like Adult Swim on FACEBOOK: http://bit.ly/ASFacebook Follow Adult Swim on TWITTER: http://bit.ly/ASTweet Rick and Morty Style Guide | Rick and Morty | Adult Swim http://www.youtube.com/user/adultswim
Views: 358490 Adult Swim
Your Brand.ai Web Style Guide
 
04:07
In this tutorial, we go over creating a web style guide with Brand.ai. We also go over some advanced capabilities such as tagging and data export. With the Brand.ai Sketch plugin, this style guide becomes the web view of your design library in Sketch.
Views: 382 Brand.ai
How to Design a Website - The Style Guide
 
05:39
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
Views: 5249 Alessandro Castellani
Frontify Academy – Using UI Patterns in Style Guide
 
04:19
Create a pattern library in Frontify Style Guide In this video we’ll cover the following topics: - Organize patterns based on atomic design principles - Add your patterns using the UI pattern block - Create new or insert existing UI patterns - Add external resources such as Bootstrap - Toggle breakpoints and adjust them to your needs - Make use of the developer package block
Views: 135 Frontify
Part 3: Creating a Webflow style guide
 
25:10
Video series of Waldo Broodryk building out https://aviationgin.webflow.io/ in Webflow and pitching it to Ryan Reynolds on Twitter. Figma to Webflow site redesign. Design by Jeff Black Development by Waldo Broodryk Clonable style guide template by Ryan Morrison available here for free: https://webflow.com/website/the-style-guide-template I've got a few extra ones too which you can clone here: https://webflow.com/website/Light-Style-Guide?s=light-styleguide https://webflow.com/website/Style-Guide-Template-Design-by-Aaron-Iker
Views: 705 Waldo Broodryk
IDENTITY DESIGN: BRANDING
 
28:52
What's the difference between identity design and branding? Is a logo a brand? What is a brand? 3 things you might not know about identity design and branding from Executive Creative Director Chris Do. 👉Subscribe: https://goo.gl/F2AEbk 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 Webinar: https://www.youtube.com/watch?v=5l4i3PZucHI CORE Defining the Brand: https://www.youtube.com/watch?v=e916gMCWVKI CORE session Alignment: https://www.youtube.com/watch?v=uOeIG_WDesw _________________________________________________ 👉Subscribe: https://goo.gl/F2AEbk 👉See our Academy Channel: https://goo.gl/vB9zoP Want a deeper dive? Typography, Lettering, Sales & Marketing, Social Media and The Business of Design courses available here: https://goo.gl/bRt5qd — Love the content? Become a sustaining member for $5/mo today. https://goo.gl/nwekfL BOOKLIST – Essential Reading for Creative Professionals: http://bit.ly/2UtftOb Essential Design Books: http://bit.ly/2UtftOb Kits & Proposals: https://goo.gl/mSjuWQ Visit our website: https://www.thefutur.com FREE resources: https://goo.gl/Qh6gHr Mandarin (Chinese) Subtitles on UiiUii https://uiiiuiii.com/?s=the+futur — We love getting your letters. Send it here: The Futur c/o Chris Do 1702 Olympic Blvd. Santa Monica, CA 90404 USA — OUR AFFILIATE LINKS Webflow: http://bit.ly/2EbET9l Retro Supply Co.: http://bit.ly/2GW8gzR Skillshare: https://goo.gl/YCo2uT Amazon: http://bit.ly/thefuturishere Creative Market: https://goo.gl/g4jlTE Design Cuts: http://bit.ly/2GSsAR3 Epidemic Sound: https://bit.ly/2T647tR Bring Your Own Laptop Tutorials: byol.me/thefutur By making a purchase through any of our affiliate links, we receive a very small commission at no extra cost to you. This helps us on our mission to provide quality education to you. Thank you. — 🎙 Futur Podcast: https://thefutur.com/podcast/ ✍️ Futur Blog: https://thefutur.com/blog/ Jose Caballer: http://bit.ly/josecaballerTwitter Chris Do: http://bit.ly/theChrisDoTwitter Purchase a CORE Kit: http://bit.ly/myskooltools === *By making a purchase through any of our affiliate links, we receive a very small commission at no extra cost to you. This helps us on our mission to provide quality education to you. Thank you.
Views: 551269 The Futur
Improving Web and Mobile App Typography - 5 basic guidelines
 
06:49
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/ Just My Type, learning how to mix typefaces http://www.justmytype.co/ Jessica Hische’s fantastic guide on type for the web http://jessicahische.is/talkingtype Professional web typography by Donny Truong https://prowebtype.com/ Butterick’s Practical Typography http://practicaltypography.com Style Manual by Andy Taylor http://stylemanual.org/ Fonts have feelings too, by Mikael Cho (great read) https://medium.com/who-what-why/fonts-have-feelings-too-1523564d966c#.boqxndw40
Views: 47599 Sketch Together
Style guide brief introduction
 
08:12
Style guide brief introduction using Adobe Indesign and Illustrator
Views: 1969 ronaldtraining
Creating a Button System with Nested Symbols on Sketch App
 
30:40
Resources! Simple Button System: https://www.dropbox.com/s/u5sgnre9ncnquw9/buttons-simple.sketch?dl=0 Simpler Button System: https://www.dropbox.com/s/jgwnpz1l2pv1mia/buttons-simpler.sketch?dl=0 Complex Button System: https://www.dropbox.com/s/w52cualcv4mcig0/buttons-complex.sketch?dl=0 Join our FB group: https://www.facebook.com/groups/sketchtogether/ Download Auto Layout Plugin: https://animaapp.github.io/Auto-Layout/ Blank Starting Point: https://www.dropbox.com/s/6dntvzjuuxb4bg5/buttons-blank.sketch?dl=0
Views: 101068 Sketch Together
Must have plugins in Adobe XD → 5 Plugins for UI Design
 
10:20
In this Video, you will learn how to install plugins in Adobe XD and how to use them with shortcuts and which are the best and top plugins for Adobe XD which you must use in your Web and Mobile App UI Design. Adobe XD recently added feature of plugins so use them in your daily User Interface designs I teach about UI UX Design to more than 25K students All UI UX Design and Freelancing Courses $10 discount link Adobe XD - Design, Prototype & Collaborate with Developers http://bit.ly/adobexd10 UI Design with Photoshop course http://bit.ly/uidesigncours 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 UX Design for Beginners - Design User Friendly experiences http://bit.ly/uxbegin11 --------------------------------------------------------- Facebook Page→ https://www.facebook.com/learnuxid --------------------------------------------------------- Website Link → http://learnuxid.com
Views: 11347 LearnUXID
Sketch App Tutorials - #6 Using Text Styles
 
06:22
In this Sketch App video tutorial, learn how to take control of your text using Sketch 3 Text Styles. Text styles allow for reusable styling of text similar to how you would set up text styles for a website. Subscribe for more free tutorials https://goo.gl/6ljoFc, more Sketch App Tutorials: https://goo.gl/SvgeZU Support Free Tutorials https://www.leveluptutorials.com/store/ The best shared web hosting http://www.bluehost.com/track/leveluptutorials/ Subscribe to Level Up Pro for extra features! https://www.leveluptutorials.com/store/products/pro Subscribe to the Level Up Newsletter http://eepurl.com/AWjGz To Support Level Up Tuts: http://leveluptuts.com/donations Simple cloud hosting, built for developers.: https://www.digitalocean.com/?refcode=67357174b09e Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.
Views: 135002 LevelUpTuts
Zeplin Tutorial | Sketch to Zeplin Workflow
 
14:09
In this video I go over my workflow as a UX Designer. I show you how to get started using Zeplin to handoff your design assets. Zeplin is a collaboration tool for designers and developers. I show you: - 0:28 Why I use Zeplin - 1:28 How to get started - 1:50 How to create a project - 2:28 How to import your Sketch files into Zeplin - 3:43 How to create text styles - 6:01 How to organize your artboards - 6:40 How to add tags - 7:22 How to organize your Styleguide - 8:07 How to add components - 9:57 How to export icons and images - 11:37 How to add comments - 12:27 How to share your project Try Zeplin here: https://zeplin.io/ Let's Connect Website: https://www.angeladelise.com/ Dribbble: https://dribbble.com/angeladelise Blog: https://medium.com/@angeladelise
Views: 2642 Angela Delise
Sketch App Tutorials - #7 Grids and Layouts
 
07:21
In this Sketch App video tutorial, learn how to create useful grids and layouts using Sketch 3's built in layout tools. Create web grid framework style grids that can be different per artboard! Subscribe for more free tutorials https://goo.gl/6ljoFc, more Sketch App Tutorials: https://goo.gl/SvgeZU Support Free Tutorials https://www.leveluptutorials.com/store/ The best shared web hosting http://www.bluehost.com/track/leveluptutorials/ Subscribe to Level Up Pro for extra features! http://leveluptuts.com/level-up-pro Subscribe to the Level Up Newsletter http://eepurl.com/AWjGz To Support Level Up Tuts: http://leveluptuts.com/donations Simple cloud hosting, built for developers.: https://www.digitalocean.com/?refcode=67357174b09e Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.
Views: 143120 LevelUpTuts
How to create a styleguide using gulp and sc5 styleguide
 
22:56
In this video you can learn how to install node.js, gulp.js and then SC5 styleguide as well as create an example on how to achieve these. Code: Code for this video https://github.com/teckrew/styleguide Join the Community: https://www.patreon.com/teckrew Follow Anees: https://www.facebook.com/kairul.anees https://twitter.com/mohomedanees https://instagram.com/mohomed.anees https://plus.google.com/u/0/+mohomedanees Follow Teckrew: https://www.facebook.com/teckrew2018 https://twitter.com/teckrew18 https://plus.google.com/u/1/117355787053801489566
Views: 201 Teckrew
Frontify Integrations -  Sketch Plugin
 
01:03
A streamlined collaboration between designers, developers, and business stakeholders is vital for creating a ​design that emphasizes your brand. We’ve made it possible to connect your interdisciplinary teams through one platform of truth, where your Sketch design source files live in harmony with the rest of your brand assets and guidelines.
Views: 518 Frontify
Веб-дизайн. Практическое занятие №3. Делаем свой Style Guide
 
30:24
Да-да, вам не показалось! Мы с вами наконец дошли до 3 практического урока по веб-дизайну :) Будем делать Style Guide! Это, кстати, одно из самых запрашиваемых видео по веб-дизайну. Вот psd-файл, как и обещала: https://drive.google.com/file/d/0BwdO0IqqqlaCTGJCY0x6X2d1RGc/view?usp=sharing А вот по этим ссылочкам можно отслеживать появление новых видео и другую интересную информацию: https://vk.com/madmarry https://vk.com/marie.smith https://www.instagram.com/marie.smth Приятного просмотра! Подписывайтесь и ставьте "лайк", если вам нравится то, что я делаю :)
Views: 17928 Marie Smith
Craft with Sketch3 - Creating a style sheets
 
06:12
Craft with Sketch3 - Creating a style sheets in Sketch3 with Craft (Invisionapp) in Sketch3 (Apple Mac ONLY) https://www.invisionapp.com/craft https://www.sketchapp.com/
Views: 881 solentscreencasts
Design Assets Cloud for Sketch
 
02:04
Download the free plugin from https://brand.ai/sketch Sharing a Sketch UI library with your team is now easier than ever with the Brand.ai plugin. Upload your styles and symbols to the cloud so your team can always use the most up-to-date design.
Views: 3043 Brand.ai