POPULARITY
Pattern libraries can help you streamline the design process and build a flexible system (instead of static pages). Today we're exploring this concept with Laura Elizabeth — a fantastic designer, writer & speaker. You'll learn how to plan and build a pattern library, how to document it, and how to make your clients fall in love with the result. Podcast feed: subscribe to http://simplecast.fm/podcasts/1441/rss in your favorite podcast app, and follow us on iTunes or Stitcher. Show Notes Double Your Freelancing — the website Laura is now redesigning with pattern libraries Design Academy — Laura's design course for developers Style Tiles — another concept for web design process Styleguides.io — great collection of website style guides Episode 26: Bridging the Gap Between Designers and Developers with Roger Dudler — our episode with the founder of Frontify Laura's official website Client Portal — Laura's product that helps keep all client deliverables in one place (use your special promocode uibreakfast to get $100 off) Follow Laura on Twitter: @laurium Leave a Review Reviews are hugely important because they help new people discover this podcast. If you enjoyed listening to this episode, please leave a review on iTunes.
Folge Vier des UI engineering Podcast stellt die praktische Arbeit mit Pattern Libraries vor. Es geht um Arbeitsabläufe, wo fängt man an und wie setzt man Dinge um. Wir sprechen über die Workflows, die es für den Einsatz von Pattern Libraries gibt. Wir greifen dabei auch Themen der vorherigen Episoden – Atomic Design und Styletiles – wieder auf und sehen uns ihren praktischen Einsatz an. Außerdem sprechen wir über die Zusammenarbeit von Design und Entwicklung an der Pattern Library: Was dadurch ermöglicht wird und welche Herausforderungen dabei auf das Team zukommen. In der kommenden Episode weichen wir vom bisherigen Format ab und haben uns einen Interviewgast besorgt. Wir werden tiefer in das Thema Pattern Library einsteigen und ein Open Source Projekt dazu vorstellen. Seid gespannt! Shownotes Designing Imaginative Style Guides Are Pattern Libraries Good for Design?
We talk with front end architect/designer Carrie Forde about atomic design and front-end development for WordPress. Carrie's Forde day job is as a front-end developer at the highly-respected WebDevStudios. Carrie Forde on Twitter: https://twitter.com/carrieforde Carrie's site: https://carrieforde.com/ Table of Contents for Episode 149 0:00 Podcast intros. 1:22 Carrie's origin story. 3:44 What Carrie's work typical work day looks like right now. 4:56 How difficult is it to break into front-end development in today's environment? 7:20 Carrie tells us about her Alcatraz framework for WordPress that she developed. 9:05 What are style tiles? And what is Carrie's style tiles plugin for WordPress? 12:27 Carries teaches us about atomic design and the benefits of using it in UI design. 17:10 More resources for learning about Atomic Design. 19:38 What the WordPress community can do to make themes more accessible? 21:43 A habit to develop when creating WordPress themes to make them translatable. 22:48 What inspired Carrie to build the Alcatraz framework and what ideas in Genesis she wanted to improve on. 25:06 Carries philosophy on creating themes and making them developer friendly. 27:23 What goes into a CSS refactoring project. 28:56 Where does a CSS refactoring project make sense? 30:33 What is Carrie's preferred naming or organizational convention for writing CSS? 31:48 What are some great resources for learning JavaScript? 34:31 Are there any trends in CSS and front development that Carrie sees becoming prominent in 2017? 36:10 Any resources that Carries recommends for learning front-end development? =================== Links mentioned during the show: WebDev Studios https://webdevstudios.com/ Mighty Minnow https://www.mightyminnow.com/ Alcatraz - A framework for creating awesome, flexible WordPress themes http://alcatraztheme.com/ https://github.com/carrieforde/Alcatraz Style Tiles (Samantha Warren) http://styletil.es/ Style Tiles and How They Work (A List Apart) http://alistapart.com/article/style-tiles-and-how-they-work Faster Design Decisions with Style Tiles (An Event Apart) https://vimeo.com/115992327 WordPress Style Tiles (Carrie Forde plugin) https://github.com/carrieforde/WordPress-Style-Tiles Creating Themes with Atomic Design (WC Sac 2016) https://speakerdeck.com/carrieforde/creating-themes-with-atomic-design Atomic Design Methodology http://atomicdesign.bradfrost.com/chapter-2/ Atomic Design: The Book http://bradfrost.com/blog/post/atomic-design-book/ PatternLab.io http://patternlab.io/ Strengths Finder 2.0 https://www.amazon.com/StrengthsFinder-2-0-Tom-Rath/dp/159562015X BEM - Block Element Modifier http://getbem.com/introduction/ ITCSS - Scalable, Mainta
In der zweiten Folge des UI engineering Podcast geht es um Style Tiles, Stil-Kacheln sozusagen: Styletiles sind ein Tool, welches bei der Findung von Designrichtungen und auch der Entwicklung von konkreten Interface-Anmutungen hilfreich sein können. Spitzer und klarer als Moodboards, aber nicht so “Detail-belastet” wie ein Layout können Sie zu sehr viel Hilfe und Tempo in der Zusammenarbeit mit Kunden, Entwicklern und Designern bringen. Wir berichten über Grundlagen und Anwendungsbeispiele, damit Ihr dieses Tool für Euch entdecken könnt. Shownotes Styletiles Website Communicating With Style Tiles Getter Better Visual Design Feedback with Style Tiles
02:29 - Sean Fioritto Introduction @sfioritto planning for aliens 02:52 - Design and Sketching with CSS Background & Overview Cascading Style Sheets (CSS) Sketching with CSS by Sean Fioritto Skip Using Photoshop; Move Straight to Code => Get Pixels to Screen Faster 06:34 - Developer Designer Communication Tooling and Muscle Memory 12:23 - Using CSS Over Photoshop, Alternative Programs, and Frameworks Sketch InVision Macaw 15:29 - Grid Systems and Resets (Frontend Tools) i.e. Grid Systems The Grid System Responsive Grid System CSS Resets What Is A CSS Reset? CSS Tools: Reset CSS 17:27 - Prototyping (Workflow) Git 23:14 - Documentation 26:14 - Adopting New Practices (Progressive Enhancement) (Killer) Interactive Demo Presentations “Style Tiles” Fluency "Pixel Pushers" 45:33 - The Modern Web Moving Forward 47:30 - Keep Up with Scott Sketching with CSS by Sean Fioritto planning for aliens The ginormous, unstoppable list of Angular resources Picks NoSQL Distilled: A Brief Guide to the Emerging World of Polyglot Persistence by Pramod J. Sadalage and Martin Fowler (David) RoT.js (David) The Spatials (David) The User is Drunk (Saron) Drunk Kitchen (Saron) The Reckoners Series by Brandon Sanderson (Chuck) Bootstrapping Design: Roll Your Own Design by Jarrod Drysdale (Sean) The Ruby DSL Handbook by Jim Gay (Sean) Ryan Castillo: 7 Recurring Recipes for Consultancies (Sean) ExpeditedSSL (Sean) The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing Marie Kondo (Sean)
02:29 - Sean Fioritto Introduction @sfioritto planning for aliens 02:52 - Design and Sketching with CSS Background & Overview Cascading Style Sheets (CSS) Sketching with CSS by Sean Fioritto Skip Using Photoshop; Move Straight to Code => Get Pixels to Screen Faster 06:34 - Developer Designer Communication Tooling and Muscle Memory 12:23 - Using CSS Over Photoshop, Alternative Programs, and Frameworks Sketch InVision Macaw 15:29 - Grid Systems and Resets (Frontend Tools) i.e. Grid Systems The Grid System Responsive Grid System CSS Resets What Is A CSS Reset? CSS Tools: Reset CSS 17:27 - Prototyping (Workflow) Git 23:14 - Documentation 26:14 - Adopting New Practices (Progressive Enhancement) (Killer) Interactive Demo Presentations “Style Tiles” Fluency "Pixel Pushers" 45:33 - The Modern Web Moving Forward 47:30 - Keep Up with Scott Sketching with CSS by Sean Fioritto planning for aliens The ginormous, unstoppable list of Angular resources Picks NoSQL Distilled: A Brief Guide to the Emerging World of Polyglot Persistence by Pramod J. Sadalage and Martin Fowler (David) RoT.js (David) The Spatials (David) The User is Drunk (Saron) Drunk Kitchen (Saron) The Reckoners Series by Brandon Sanderson (Chuck) Bootstrapping Design: Roll Your Own Design by Jarrod Drysdale (Sean) The Ruby DSL Handbook by Jim Gay (Sean) Ryan Castillo: 7 Recurring Recipes for Consultancies (Sean) ExpeditedSSL (Sean) The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing Marie Kondo (Sean)
02:29 - Sean Fioritto Introduction @sfioritto planning for aliens 02:52 - Design and Sketching with CSS Background & Overview Cascading Style Sheets (CSS) Sketching with CSS by Sean Fioritto Skip Using Photoshop; Move Straight to Code => Get Pixels to Screen Faster 06:34 - Developer Designer Communication Tooling and Muscle Memory 12:23 - Using CSS Over Photoshop, Alternative Programs, and Frameworks Sketch InVision Macaw 15:29 - Grid Systems and Resets (Frontend Tools) i.e. Grid Systems The Grid System Responsive Grid System CSS Resets What Is A CSS Reset? CSS Tools: Reset CSS 17:27 - Prototyping (Workflow) Git 23:14 - Documentation 26:14 - Adopting New Practices (Progressive Enhancement) (Killer) Interactive Demo Presentations “Style Tiles” Fluency "Pixel Pushers" 45:33 - The Modern Web Moving Forward 47:30 - Keep Up with Scott Sketching with CSS by Sean Fioritto planning for aliens The ginormous, unstoppable list of Angular resources Picks NoSQL Distilled: A Brief Guide to the Emerging World of Polyglot Persistence by Pramod J. Sadalage and Martin Fowler (David) RoT.js (David) The Spatials (David) The User is Drunk (Saron) Drunk Kitchen (Saron) The Reckoners Series by Brandon Sanderson (Chuck) Bootstrapping Design: Roll Your Own Design by Jarrod Drysdale (Sean) The Ruby DSL Handbook by Jim Gay (Sean) Ryan Castillo: 7 Recurring Recipes for Consultancies (Sean) ExpeditedSSL (Sean) The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing Marie Kondo (Sean)
Samantha introduces us to Style Tiles, how they came about, how to create your own, and when to use them.
Big changes in web technology are forcing us all to look at what many have been saying for a while — the web design workflow that was enshrined over the last decade really doesn't work. The creator of Style Tiles, Samantha Warren, joins Jen Simmons to talk about workflows, design processes, and how new ideas about our tools can help us all better design websites for the modern age.
Samantha Warren is an experienced designer, speaker, and writer who leverages a diverse background in artistic mediums to create compelling and functional web experiences. Currently, Samantha is the Communications designer at Twitter. She talks about design and the web on her blog, BadAssIdeas.com, and spends time with her cross-eyed cat, Grace.
Jeffrey Zeldman interviews Tim Brown of Typekit and Nice Web Type on where we are with web fonts, real web type in real web context, using Dribbble to develop a tone of voice, how saving small snippets of other people's content can turn you into a blogger, Samantha Warren's Style Tiles, molten leading orbital content, pages versus chunks, the type-driven design, web font fallbacks, the connection between leading and font family, transitioning from university work to Typekit, and much more. Links for this episode:FacitWeb on TypekitResponsive typographyModular scales — meaningful numbers for layoutMore Meaningful TypographyBuild talkWeb Font SpecimenReal Web Type in Real Web ContextHow I use TwitterOn leaving VassarFont Events – Typekit BlogFfffallback – a webfont fallback appNice Web TypeTypekitAdobeThe Articulate Web Designer of Tomorrow – 24 WaysOrbital Content – A List ApartFonts in UseFacit web fontTypekit blogNice Web TypeBuild ConferenceDesign by FrontTypecast appStyle Tiles – Samatha WarrenResponsive SummitMolten Leading – Nice Web TypeTim Brown on DribbblePrinciples of Typography on the Web