Home
Search results “User interface style guides”
4 stages of UI Design → UI Design Basics
 
03:54
In this Video, you will learn what are the 4 stages of designing any website, mobile app or landing page. And how every designer start with sketches then move to block design, wire-frames and in the end convert it to a Mock-up or Hi resolution Design. The steps taken for each UI Design process out there. These are must have steps for every Web Designer or UI Designer. -------------------------------------------------------------------------------- I teach about UI UX Design to more than 27K 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: 2788 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: 30058 Google Developers
10 Rules of Good UI Design to Follow
 
05:06
In today’s video we take a look at 10 rules of good UI design to follow. Blog post: https://www.elegantthemes.com/blog/resources/10-rules-of-good-ui-design-to-follow-on-every-web-design-project Like us on Facebook: https://www.facebook.com/elegantthemes/
Views: 6184 Elegant Themes
5 UX Design Tips & Techniques | UX Design Basics
 
06:22
UX design is a highly sought-after skill these days, and for good reason, a UX designer focuses on making products more effective to it's users... But there's not always a dedicated UX Designer on the team, in the budget, or in the scope of work. Today's video is focused on 5 UX Design techniques you can apply right now in your projects as a designer that will take you a long way. Remember to Subscribe https://goo.gl/6vCw64 UX Design Definition: User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human-computer interaction (HCI) design and extends it by addressing all aspects of a product or service as perceived by users. UX Design resources: http://uxmag.com/ https://www.smashingmagazine.com/category/user-experience https://www.awwwards.com/ http://uxmovement.com/ https://designmodo.com/design/ux-design/ http://www.uxbooth.com/ ------------------------------------------------------------------------------------ ////////// 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: 14802 Jesse Showalter
Using Gestalt Proximity Principle in your UI Designs
 
08:05
In this video, you will learn how to use Gestalt Principle of Proximity in User Interface Design and improve your design skills overall I teach about UI UX Design to more than 25K 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 -------------------------------------- All UI UX Design and Freelancing 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 UX Design for Beginners - Design User Friendly experiences http://bit.ly/uxbegin11 Adobe XD - Design, Prototype & Collaborate with Developers http://bit.ly/adobexd10 --------------------------------------------------------- Facebook Page→ https://www.facebook.com/learnuxid --------------------------------------------------------- Website Link → http://learnuxid.com
Views: 1540 LearnUXID
How to improve UI Design Skills → 3 Steps to get better
 
04:33
In this Video, you will learn 3 tips to learn UI Design fast and improve your current User Interface Design Skills. This video for UI Design beginners or novices or people who are learning the skill of UI Design these days ------------------------------------------------------------- I teach about UI UX Design to more than 30K 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: 379 LearnUXID
Illustrating for UI Design with Kevin Yang & Rocky Roark - 1 of 2
 
01:57:27
Join Designer Kevin Yang and Illustrator Rocky Roark on Adobe Live as they design & prototype a chess app using After Effects, Illustrator and Adobe XD. This week, Rocky will create illustrations and branding assets while Kevin designs, prototypes and animates the mobile app. Stick around until the end to learn how they compile their work into a portfolio-ready case study. Kevin is a Designer for Riot Games based in Los Angeles, CA. Rocky is the Director of Blue Cyclops, an independent creative studio based out of San Diego, CA focused on illustration, branding and strategy. ----- Join us LIVE on Behance: https://www.behance.net/adobelive Check out part 2: https://www.youtube.com/watch?v=EbSk_Kldyg0 Introductions: 2:25 Work begins: 5:40 Quick scale tip: 15:58 Color Libraries: 40:25 Recolor artwork tip: 1:04:00 Rocky’s Website: https://www.rockyroark.com Rocky’s Behance: https://www.behance.net/rockyroark Kevin’s Behance: https://www.behance.net/eatsleepvector
Views: 3217 Adobe Creative Cloud
LIVE: Designing a simple Cards UI Kit
 
01:40:12
Jump to 4:00 to skip all the awkward stuff in the beginning ❤️ We're gonna create a basic design library with UI cards. Typography, Color, Icons, Buttons, Cards. Stuff we made here: https://www.dropbox.com/sh/g9gw2syzk6gjxgl/AABEluok1j8x_WKShNjyhS9va?dl=0 RESOURCES Modular Scale https://www.modularscale.com/ Picular for Color Inspiration https://picular.co/ Grid Calculator http://gridcalculator.dk/ Space Grotesk fonts.floriankarsten.com/space-grotesk Font Awesome https://fontawesome.com/ Contrast Checker https://webaim.org/resources/contrastchecker/
Views: 8145 Sketch Together
FLAT vs. Depth for Web Design in 2018? A Quick Tutorial
 
18:09
https://coursetro.com - I've been a UI designer since the late 90's, so, I've seen a lot of the trends come and go. Flat design however has stuck around. Is it always the best approach? Get my take as I walk you through my process! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://coursetro.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!
Views: 268489 DesignCourse
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: 754 Bitovi UX & Design
How to use the New Adobe XD UI Kits
 
10:57
Written tutorial: https://goo.gl/MClRPw http://coursetro.com for more awesomeness. A few days ago, Adobe updated XD to include 3 UI kits for the most popular mobile platforms. Today, I show you how to use them. - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://coursetro.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!
Views: 168047 DesignCourse
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: 1345 FooCafe
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: 278 Kevin Mack
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: 430 Bitovi UX & Design
O QUE É STYLE GUIDE? BATE PAPO COM WILLIAN MATIOLA DA UILAB - ENTREVISTA
 
28:02
Neste vídeo conversei com Willian Matiola da UILAB sobre Style Guides ou em português Guias de Estilo de Design, falamos sobre o que são, quando e porque usa-las. Conversamos em um bate papo bem descontraído e também comentamos sobre a diferença entre Style Guide e Design System, além disso rolou algumas dicas e opiniões bacanas sobre o assunto para quem está começando e quer saber mais e aprender mais. CURSO: Quer aprender mais sobre Style Guides? A UILAB preparou um curso super bacana por e-mail, da uma conferida no site deles e veja todos os detalhes: http://bit.ly/curso-style-guide Site e Redes Sociais da UILAB: https://uilab.com.br/ https://www.facebook.com/uilabschool https://www.instagram.com/uilabschool/ https://twitter.com/uilabschool https://www.youtube.com/uilabschool https://www.linkedin.com/school/uilabschool/ https://medium.com/ui-lab-school Ainda não é inscrito no canal? Inscreva-se! http://youtube.com/uidesign Estamos no facebook, curta e compartilhe: https://facebook.com/canaluidesign Podcast U&I Design: https://anchor.fm/uidesign/ ----- Sobre o Autor: Caio Calderari é Designer desde 2005, formado em Publicidade e Propaganda e hoje trabalha em Campinas, São Paulo, Brasil. É organizador do Meetup Design Campinas e compartilha conteúdos neste canal no youtube e também no Medium. Links & Redes Sociais: http://medium.com/@calderaricaio http://www.facebook.com/calderaricaio http://twitter.com/calderaricaio http://dribbble.com/calderaricaio ----- Você é de Campinas? Participe do Meetup Design Campinas, acesse: http://www.meetupdesigncampinas.com e saiba mais. ----- Compartilhe este vídeo em suas redes sociais! Envie para seus amigos designers. ----- Neste canal você pode encontrar conteúdos como: Vídeos sobre design, tutorial sobre design, conteúdo para designers, web designers, tutoriais de Sketch, Photoshop e outros assuntos relacionados a UI e UX Design. #design #ui #styleguides
Views: 204 U&I 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: 231 Kevin Mack
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 1,000,000 ready-to-use photos, illustrations, templates, effects, fonts, brushes and more! http://bit.ly/2Y7zqrX - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ❤️ Achieve MAXIMUM creativity with Adobe’s Creative Cloud Apps Creative Cloud gives you access to awesome apps and services for design, video and photography. http://bit.ly/2Y7tWxn - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ⭐️ The BEST Website Builder for Designers Design responsive websites with powerful interactions, zero coding required, and it’s free to get started! http://bit.ly/2OdXi8Z - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Links in the description are typically affiliate links that help support the channel, and as an Amazon Associate I earn from qualifying purchases.
Views: 31552 Dansky
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: 2690 Toby Silverman
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: 218 Bitovi UX & Design
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: 1628 Bitovi UX & Design
The Psychological Basis for UI Design Rules
 
01:15:23
(October 8, 2010) Guest speaker Jeff Johnson of UI Wizards shares how design mentality has changed over the years and where it is heading in the future. He draws on experiences from his own career to give the students a better idea of the themes he is discussing. Stanford University: http://www.stanford.edu/ School of Engineering: http://soe.stanford.edu/ Stanford Center for Professional Development: http://scpd.stanford.edu/ Stanford University Channel on YouTube: http://www.youtube.com/stanford
Views: 79601 Stanford
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: 632 Matej Novak
Brad Frost | The Technical Side of Design Systems | UI Special, CSS Day 2019
 
51:31
You can have a killer style guide website, a great-looking Sketch library, and robust documentation, but if your design system isn't actually powering real software products, all that effort is for naught. At the heart of a successful design system is a collection of sturdy, robust front-end components that powers other applications' user interfaces. This talk covers what's involved in establishing a technical architecture for your design system, including front-end workshop environments, CSS architecture, implementing design tokens, popular libraries like React and Vue.js, deploying design systems, managing updates, and more. Resources: http://bradfrost.com/blog/post/the-technical-side-of-design-systems-at-css-day-in-amsterdam/ About Brad: http://bradfrost.com/ Follow Brad: https://twitter.com/brad_frost More about CSS Day: https://cssday.nl or https://twitter.com/cssdayconf Receive conference announcements in your inbox: https://cssday.nl/subscribe
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: 299 Bitovi UX & Design
Handoff Design Specs Adobe XD Tutorial
 
04:04
In this tutorial, we're going to learn how to publish design specs for handoff to a developer in Adobe XD. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 📦 Download UNLIMITED Assets for Designers Get access to over 1,000,000 ready-to-use photos, illustrations, templates, effects, fonts, brushes and more! http://bit.ly/2Y7zqrX - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ❤️ Achieve MAXIMUM creativity with Adobe’s Creative Cloud Apps Creative Cloud gives you access to awesome apps and services for design, video and photography. http://bit.ly/2Y7tWxn - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ⭐️ The BEST Website Builder for Designers Design responsive websites with powerful interactions, zero coding required, and it’s free to get started! http://bit.ly/2OdXi8Z - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Links in the description are typically affiliate links that help support the channel, and as an Amazon Associate I earn from qualifying purchases.
Views: 33400 Dansky
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: 310 Bitovi UX & Design
Using style guides on Uizard platform
 
00:50
A sneak peak of the new style guide feature on Uizard. Imagine being able to transform your wireframe sketches directly to fully styled digital interfaces. That's exactly what this feature is enabling! We are introducing style guides to let you specify exactly how you want different elements to look like. More info at https://uizard.io Music generated with AI from Jukedeck - create your own at http://jukedeck.com
Views: 779 Uizard
The 2019 UI Design Crash Course for Beginners
 
01:36:53
https://skl.sh/designcourse19 - First 500 people to sign up will get their first 2 months free! -- The Frontend Dev Course using this mockup is here: https://www.youtube.com/watch?v=8gNrZ4lAnAw -- Are you frustrated that you simply can't produce a good UI design? Sure, you clearly know and SEE what a great design looks like from the top designers on sites like Dribbble and Behance, but why can't you produce them? In this course, I'm going to help answer that question and provide you with a blueprint that's going to speed up your transition from producing ugly UI's as a beginner, to producing fantastic UI's. First, we're going to spend some time discussing the very important design fundamentals that you need to understand before you can start designing UI's. Then, we'll step into a design and prototyping app (Adobe XD, it's free! https://www.adobe.com/products/xd.html) and design a beautiful UI from scratch. While doing this, I'm going to describe exactly what's going through my mind as I piece together a UI. Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://coursetro.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!
Views: 324220 DesignCourse
Atomic Design - How To Make Web and UI Design Easier
 
10:04
What is Atomic Design? What are design systems? How can you speed up your web design process? Ever set out on a website or interface design project and wind up buried under hundreds of screens? Do your prototypes grow out of control and overwhelm your clients? Want to know how to get a website or project approved without designing every. single. screen? Ben Burns (@mrbenburns) has the answer you've been looking for. Special thanks to Framer X for sponsoring this video! Start your design system in Framer X today: http://bit.ly/FramerXDesignSystems 'Design Systems for the Future’ is a collection contributed by designers working on teams at Slack, Dropbox and Facebook, all curated by the team at Framer: http://bit.ly/DesignSystemsHub In the past few years, we've seen tremendous improvement in screen/interface design tools. Designing for screens has never been easier. With this change, we've seen our prototypes grow to be extremely unwieldy - 50, 100, 150 pages that are designed, usually by multiple designers, sometimes across different countries. We spent a lot of time establishing standards, and quality checking everybody's work. This significantly drained the creative director's and art director's time. There HAD to be a better way. Enter: Atomic Design. Atomic Design is a series of visual building blocks that start out very basic and become more complex as you move up the food chain. These visual building blocks are organized by complexity into different buckets: Atoms, Molecules, Organisms, Templates, and Pages. Each element type builds upon the previous in order to create fully fleshed out digital products. I remember first hearing about all this, and I have to say it was all a little confusing. If you're like me, you might want to watch this video a few times - no shame here. But many of you are probably like, whoa, wait, how do I even start this? It's pretty simple. As long as you remember one thing: Atomic design isn't meant to be linear! This means we don't expect you to start creating atoms right away. How boring would that be? Making button... after button... after button... Instead, we start by designing a page or two. Or three. And we do a few variations of pages. Sometimes we'll explore 10-20 ways to design something as simple as a home page or a product page. Once we're finished with the page design... or designs... we look for patterns. After identifying these patterns, we start extracting the elements, standardizing them, and adding each element to its own library as a reusable component. 👉Subscribe: https://goo.gl/F2AEbk We love getting your letters. Send it here: The Futur c/o Chris Do 1702 Olympic Blvd. Santa Monica, CA 90404 USA 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 — AFFILIATE LINKS* 🙏 Support The Futur by purchasing through our affiliate links: Amazon: http://bit.ly/thefuturishere Webflow: http://bit.ly/2EbET9l Retro Supply Co.: http://bit.ly/2GW8gzR Creative Market: https://goo.gl/g4jlTE Design Cuts: http://bit.ly/2GSsAR3 ✍️ Sharpen your skills by taking a course, using our affiliate links: Skillshare: https://goo.gl/YCo2uT School of Motion: http://bit.ly/futur-som Bring Your Own Laptop Tutorials: https://byol.me/thefutur 🎧 Do you like the music? Check out the music libraries we use in our affiliate links below: Epidemic Sound: https://bit.ly/2T647tR Musicbed: http://bit.ly/futurmb Artlist: http://bit.ly/2uWdna7 — Futur Podcast on iTunes: 🎙 https://itunes.apple.com/us/podcast/the-futur/id1209219220?mt=2 — Host– Ben Burns Cinematography– Aaron Szekely, Mark Contreras, Ricky Lucas Live Editor– Jona Garcia Editor– Stewart Schuster, Mark Contreras, Aaron Szekely Futur Theme Music – Adam Sanborne http://www.adamsanborne.com Typefaces: Futura, Din, Helvetica Neue Futur theme song— Adam Sanborne === *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: 40793 The Futur
UX Design vs UI Design | What's the Difference? Which one is right for me?
 
15:36
If you are thinking of pursuing a career as a UI Designer or UX Designer then this video is for you. It can be hard to know where to start and which road is the right one for you to travel down. Although there are some inherent similarities between the two roles they are very different in nature. ------------------------------------------------------------------------------------ ////////// Sign up for my Monthly Newsletter http://jesseshowalter.com/newsletter ////////// Like What I Do, Buy Me a Coffee https://www.buymeacoffee.com/jesseshowalter ////////// My Awesome Music is from Musicbed http://share.mscbd.fm/iamjesseshow To help clear things up a bit, in this video I'm going to cover the roles, tools, and expectations of day to day life for both jobs. At the end, I share a few opinions on which is right for you to pursue. In a nutshell, UX design makes websites functional and UI design makes websites beautiful. UX design, short for user experience design, is a very analytical process that is heavily based on research to find out how to design a a product in a way that it solves the customer's problem(s). UX Design Learning Links: https://uxdesign.cc/ https://www.smashingmagazine.com/category/uxdesign/ https://www.uxpin.com/knowledge.html http://uxmag.com/ https://www.nngroup.com/ http://www.uxbooth.com/ UI design, short for user interface design, support the UX design visually through colors, fonts, icons and graphics. UI Design Learning Links: https://designcode.io/ http://trydesignlab.com/ https://teamtreehouse.com/library/mobile-app-design-for-ios https://www.udemy.com/ui-web-design-using-adobe-illustrator-2017/ http://learnui.design/ If you want to support the content I make and buy me a cup of coffee https://www.buymeacoffee.com/jesseshowalter ------------------------------------------------------------------------------------ ////////// 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: 271559 Jesse Showalter
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: 9254 Codegram Technologies
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: 102 Bryce Thompson
Essential UX/UI Design Systems of 2019 + Use in Adobe Xd and Sketch | Design Essentials
 
15:17
Today we're taking a look at the most essential UX/UI design systems you should try out in 2019. These will speed up your design workflow by creating a solid base over which you can then design. I also show you how to use these systems as UI kits inside Adobe Xd and Sketch. Atlassian Sketch file: http://bit.ly/atlassiansketchfile Atlassian Adobe Xd file: http://bit.ly/atlassianxd Nachos Sketch file: http://bit.ly/nachossketch Ant Design : https://ant.design/docs/spec/download Audi Design System: https://www.audi.com/ci/en/guides/user-interface/introduction.html IBM Design Language: https://www.ibm.com/design/language Grommet Design System: https://v2.grommet.io Join Facebook Design Group -- https://www.facebook.com/groups/punit... Music in the video: "Name of Track" by Creator Follow Me on Twitter: https://twitter.com/punitweb Follow me on Medium: https://medium.com/@punitweb My Behance Profile: https://www.behance.net/punitweb #designsystem #uidesign #adobexd #sketch
Views: 1150 Punit Chawla
UI/UX Design with Chris Cannon - 1 of 3
 
01:58:35
Join Designer Chris Cannon on Adobe Live as he defines, builds and applies an original design system using Adobe XD. Today, Chris designs the overall system and builds wireframes for Swipe, an iPad point of sale app. Chris is the Creative Director at Colours Design, a Utah based digital studio that designs brand stories and digital experiences. ----- ►Check out Chris’ Behance: https://www.behance.net/colourfulchris ►Click HERE for part 2: https://www.youtube.com/watch?v=tA6THgd9kmg Intro: 2:30 What is a design system: 5:55 Work begins: 16:05 Advice on using grids: 40:00 How to add XD feature requests: 54:45 Brand guides vs. design systems: 1:01:30 ► Click HERE to watch LIVE: http://bit.ly/AdobeLiveBe ► Click HERE to watch REPLAYS: http://bit.ly/AdobeLiveReplays ► View our SCHEDULE: http://bit.ly/AdobeLiveSchedule Music by Chillhop & Andrew Applepie http://chillhop.com/listen https://andrewapplepie.com/
Views: 2808 Adobe Creative Cloud
Good Design, Bad Design - The Best & Worst of Graphic Design in Games ~ Design Doc
 
15:24
Graphic Design is EVERYWHERE in games, but rarely do we ever actually talk about it. Today, I take some time to look at the highs and lows in game UI, menus, and presentation. Recent Work: Brutal Legend ~ https://www.youtube.com/watch?v=VK_ldZ6op1w Support Design Doc on Patreon and help us release videos faster: http://www.patreon.com/designdoc https://twitter.com/Warbot400 Special Thanks to the Super Best Friends Subreddit for suggestions.
Views: 458484 Design Doc
So You Wanna Make Games?? | Episode 9: User Interface Design
 
12:29
Many games require you to have immediate access to a ton of critical information like stats, inventory, mission info, and location. Being able to easily access that info when you need it—and only when you need it—is the result of UI designers working very closely with user experience designers. In this video we review the difference between UX and UI design and hear from visual designers and motion graphics artists about some core considerations for designing UI and ensuring a game experience is consistent, cohesive, and immersive. Visit our website for additional resources: https://www.riotgames.com/en/artedu/user-interface-design
Views: 42689 Riot Games
Learn UI/UX Development – Session 12 II HTML Classes and ID’s,Guide for UI Developers
 
04:45
UI/UX DEVELOPMENT LEARNING PROGRAM is an initiative of Freshersworld.com to make candidates more Technical competent.For UI/UX jobs please register to Freshersworld.com (https://www.freshersworld.com?src=Youtube) and get latest notifications,job details of all MNC and Start up's. Download our app today to manage recruitment when ever and where ever you want : Link :https://play.google.com/store/apps/details?id=com.freshersworld.jobs&hl=en ***Disclaimer: This is just a training video for candidates and recruiters. The name, logo and properties mentioned in the video are proprietary property of the respective organizations. The Preparation tips and tricks are an indicative generalized information. In no way Freshersworld.com, indulges into direct or indirect promotion of the respective Groups or organizations.
Interactive styleguide for VOLTU (UI Design)
 
00:36
This is part of our UI design case study for VOLTU (glispa GmbH) Even though we were responsible for the entire frontend development in addition to designing the interface, we left glispa well-equipped for the future by providing them with an interactive style guide. UI elements with all of their properties such as position, color, font, etc. can be individually inspected and exported to all formats if needed. Read the whole case study here: ENGLISH http://mndn.de/en/2016/12/13/case-study-voltu-social-influencer-ui-en/ GERMAN http://mndn.de/2016/12/13/case-study-voltu-social-influencer-ui-design/ MNDN is an interface design agency in Berlin, Germany. http://mndn.de
Views: 77 Mondon Design
User Experience at Macro and Micro Levels - UX Design Process Simplified
 
03:02
In this Video, you will learn how we must look at the User Experience Design process and which lenses we must use for better user experience and those lenses are Macro UX and Micro UX ------------------------------------------------------------- I teach about UI UX Design to more than 30K 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: 235 LearnUXID
UI & Web-design for beginners
 
01:24:38
Want to bootstrap your design? Learn to quickly build a set of icons, a logo, a newsletter banner or even a mockup for your app. We'll cover everything you need to know to build your graphical assets: - Latest and coolest resources for the best pictures, icons, colours, fonts, and patterns. - Demo of Sketch, a popular graphical tool used in startups, to refine your icons, change their colour and shape, export them, and customise any assets (logo, icons, newsletter banner, etc.) - General knowledge about standard UI components and how they are built. - Designer tricks and secrets (how to build a nice shadow? Add a filter to a cover pic? resize pictures with different proportions? Create masks? etc..). --- Go further with Le Wagon and learn HTML, CSS, ruby, Rails, Javascript, Github, APIs and much more 🚀 during our 2 month full-time immersive bootcamp 👉 https://www.lewagon.com/program Le Wagon is the first bootcamp bringing technical skills to creative entrepreneurs in London. Join us on Meetup, we can't wait to see you there ! http://bit.ly/25r3iNE Get in touch on Facebook & Twitter http://bit.ly/25EcwcR http://bit.ly/1CDYy7z
Views: 169962 Le Wagon
Mobile App UI Design in Adobe XD - 1 of 2
 
31:32
In this tutorial, we're going to learn how to design a mobile app UI in Adobe XD. In the next tutorial we're going to learn how to animate the design with an app called ProtoPie. Watch part 2 https://www.youtube.com/watch?v=juySuxeg80A Check out ProtoPie here https://protopie.io - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 📦 Download UNLIMITED Assets for Designers Get access to over 1,000,000 ready-to-use photos, illustrations, templates, effects, fonts, brushes and more! http://bit.ly/2Y7zqrX - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ❤️ Achieve MAXIMUM creativity with Adobe’s Creative Cloud Apps Creative Cloud gives you access to awesome apps and services for design, video and photography. http://bit.ly/2Y7tWxn - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ⭐️ The BEST Website Builder for Designers Design responsive websites with powerful interactions, zero coding required, and it’s free to get started! http://bit.ly/2OdXi8Z - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Links in the description are typically affiliate links that help support the channel, and as an Amazon Associate I earn from qualifying purchases.
Views: 229610 Dansky
Lucijan Blagonić - Modular and Bulletproof User Interfaces
 
21:19
Delivering design as a style guide and a pattern library while keeping your design process — bulletproof. Working with bigger projects is often a challenge from the design standpoint. It’s important to optimise the design phase so that we can easily keep track of different interface elements across the site. Building an interface inventory is often the first step, with style guide and pattern libraries following the design process — serving as the project foundation. The final deliverable is always HTML and CSS, in form of building blocks and components that will allow you to easily build new templates and test for different use–case scenarios while your design remains bulletproof — even with future updates.
Views: 43 WebCamp Zagreb
User Interface Moments
 
05:39
How can you use the 6 D's to make better decisions on how you invest your resources? In this video, Peter will show you the specific moment to plug into any exponential technology. For more videos like this visit: https://www.a360.digital
Views: 4462 Peter H. Diamandis
Crafting Front-End Style Guides (Video)
 
02:20:37
Video From Crafting Front-End Style Guides 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: 25 Shwaman Josh
Caravel for JIRA
 
01:17
Caravel is a seamless knowledge hub for UX and agile teams. No more PDFs with outdated user personas, confusing UI style guides or multiple keynotes explaining the desired user experience. INTUITIVE DESIGN WORKFLOWS Consult designers’ work in a straightforward and consistent way with annotated screens. SIMPLIFIED DESIGN & UI DELIVERABLES A single place for every style guide and deliverable. Access commented screenshots, samples of CSS code, color palettes, icons, or any kind of design file. CONTEXTUAL PERSONAS & STORIES Intuitive persona pages that can be linked to each interface or product screen. _______________________ Get our add-on for free: https://marketplace.atlassian.com/plugins/com.usedesign.caravel.jira/cloud/overview _______________________ Want to learn more about Caravel? https://blog.caravel.design/caravel-for-jira-e92a63c5c2ea
Views: 252 Caravel
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
How to use typography in UI Design - Part 2
 
15:52
In part 2, I talk further about styling text and how to use type with images. I also talk about helpful resources you can use to improve your skills including WhatFont, TypePair and TipTopTypeTips. | #10kdesigners Request to join the Facebook group: https://goo.gl/oKpfd4 'Learn Design with Abhinav' syllabus outline: https://goo.gl/AzqgZk Pyjama Profit: The Millennial's Guide to a Sustainable Freelance Career https://goo.gl/qTYa1e Webflow: Make websites without learning how to code. It's what I use for all my projects http://bit.ly/2DwyuWe UI Sources: Get real design inspiration from the world's top grossing and best designed apps https://goo.gl/3UcYxY Sneha's newsletter, Tip Top Type Tips: https://tiptoptypetips.com Check out some behind the scenes and more 👇🏼 https://instagram.com/abhinavch https://twitter.com/abnux https://dribbble.com/abhinavc
Views: 629 ABNUX
Design System as part of Accelerated UI Development | Sysco LABS Methodologies
 
11:02
Milinda, Buddhika and Abhiman from the Sysco LABS UI/UX Team discuss the role of Design Systems as part of Accelerated UI Development. The video includes; - The importance of quick UI delivery and extensibility of the designs for fast paced development work flow. - The traditional UI development method vs style guides and component libraries - High level architecture of libraries - Impact assessment - Challenges - Design system definition - Role of component library and style guide within design system
UXExpert.in - UI, UX and Usability Consulting Services in Pune, India
 
02:46
UXExpert specializes in the design of user interaction and in the use of emerging techniques and practices for developing usable human-computer interaction. We offer a consultant service for : - Specification of Standards and Style Guides - Support and Facilitation for Participatory Designs - Establishment of Usability Objectives - Process and Interaction Designs - Object-Oriented UI Designs
Views: 274 Tushar Deshmukh
Semantic UI In 60 Minutes
 
58:30
In this crash course we will talk about all of the basics of Semantic UI including the styling of headings, buttons, lists, icons and much more. We will also look at the build and compile tools with Gulp. CODE: Code for this video http://www.traversymedia.com/downloads/semantic-sandbox.zip SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa EDUONIX COURSES: Please use affiliate links from website below http://www.traversymedia.com/eduonix-courses SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.linkedin.com/bradtraversy
Views: 104127 Traversy Media