Style Guides in the Wild
•
1 like•1,296 views
Matt Bee is a freelance developer based in the UK who has worked on websites for organizations like the National Theatre and Brighton Fringe. He discusses how traditional style guides focused only on print and lacked guidance for online design. Living style guides address this by styling base elements, building modular components to handle different content, and documenting each part. This allows for focused design, less messy code, and quicker integration. Bee then provides examples of tools and resources for building living style guides and discusses his successful experience creating one for the Brighton Fringe 2016 website.
Report
Share
Report
Share
Download to read offline
Recommended
Ruter Design System - A design system for public transport
The presentation gives a thorough overview of how Ruter Design System simplifies, streamlines and assures quality in Ruter's product development.
Design System - Fail, Learn, Build, Test
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
Improving WordPress Themes & Plugins Support Documentation
Solid user support documentation of WordPress themes and plugins is key for Users Experience. Many WordPress theme and plugin developers have frustrated users. Users are digging through websites, forums and surfing the web for answers on how to setup, use or modify WordPress products.
Learn how to create an effective learning channel incorporating Information Architecture and User Experience techniques. Develop a blue print to organize your step by step guides, video tutorials, troubleshooting tips, FAQ, and forums for easy findability for both novices and pros. Points to address include reducing your user’s pain points and learning curve, the value of UI consistency, alternative concept map of information and a developer’s documentation check list before release.
Essential Prototyping for Entrepreneurs
Prototyping is a skill that every entrepreneur should have. As a UX designer who turns to startup founder myself, I crafted this course and hope it can help a non-technical people can get started doing something toward from their idea to the next step.
Be a Lean UX Team Machine
The convergence of building native mobile apps, growing WP design agencies and acquiring enterprise projects empowers WordPress to the next level. Now is the time to step up our game with a Lean UX workflow. Lean UX is a fast design process with focus on a sequences of sprints to define, prototype, test, and refine user experience. Team collaboration, customer learning cycles, and design thinking are key. Find out how Lean UX creates the best user outcomes.
Road Map to great User Documentation for WordPress
For WordPress Theme and Plugin Developers. WordPress users want to improve their productivity by selecting themes and plugins with quality learning documentation. Their user experience is to find information to install, implement and modify your products with as little problems as possible. Develop an effective learning channel, architect the site for findability and engage in quick user testing should be a priority not an afterthought. Stand out with tips on writing, instructional and visual presentation for all types of learner. Doc Sprints and case studies also included.
Triple Crown of Custom Content - IA Strategy Session
Preplanning the relationships of custom post types, taxonomies and custom fields using Information Architecture and Content Architecture best practices. This ensures your WordPress content structure is organized effectively by taking the time to conduct analysis and planning, before implementation.
Create Great User Documents for Word Press
Creating a multiple learning channel improves the learning experience of WordPress users. Ideas, tips & case study for the increase theme and plugin developers.
Recommended
Ruter Design System - A design system for public transport
The presentation gives a thorough overview of how Ruter Design System simplifies, streamlines and assures quality in Ruter's product development.
Design System - Fail, Learn, Build, Test
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
Improving WordPress Themes & Plugins Support Documentation
Solid user support documentation of WordPress themes and plugins is key for Users Experience. Many WordPress theme and plugin developers have frustrated users. Users are digging through websites, forums and surfing the web for answers on how to setup, use or modify WordPress products.
Learn how to create an effective learning channel incorporating Information Architecture and User Experience techniques. Develop a blue print to organize your step by step guides, video tutorials, troubleshooting tips, FAQ, and forums for easy findability for both novices and pros. Points to address include reducing your user’s pain points and learning curve, the value of UI consistency, alternative concept map of information and a developer’s documentation check list before release.
Essential Prototyping for Entrepreneurs
Prototyping is a skill that every entrepreneur should have. As a UX designer who turns to startup founder myself, I crafted this course and hope it can help a non-technical people can get started doing something toward from their idea to the next step.
Be a Lean UX Team Machine
The convergence of building native mobile apps, growing WP design agencies and acquiring enterprise projects empowers WordPress to the next level. Now is the time to step up our game with a Lean UX workflow. Lean UX is a fast design process with focus on a sequences of sprints to define, prototype, test, and refine user experience. Team collaboration, customer learning cycles, and design thinking are key. Find out how Lean UX creates the best user outcomes.
Road Map to great User Documentation for WordPress
For WordPress Theme and Plugin Developers. WordPress users want to improve their productivity by selecting themes and plugins with quality learning documentation. Their user experience is to find information to install, implement and modify your products with as little problems as possible. Develop an effective learning channel, architect the site for findability and engage in quick user testing should be a priority not an afterthought. Stand out with tips on writing, instructional and visual presentation for all types of learner. Doc Sprints and case studies also included.
Triple Crown of Custom Content - IA Strategy Session
Preplanning the relationships of custom post types, taxonomies and custom fields using Information Architecture and Content Architecture best practices. This ensures your WordPress content structure is organized effectively by taking the time to conduct analysis and planning, before implementation.
Create Great User Documents for Word Press
Creating a multiple learning channel improves the learning experience of WordPress users. Ideas, tips & case study for the increase theme and plugin developers.
The Adobe Legal Department Style Guide
The legal team at Adobe is constantly seeking creative new ways to better serve our customers and employees. Part of this effort has been the development of what we call The Adobe Legal Department Style Guide. We use it as the foundation of the way we create and revise our agreements, processes, policies and trainings to ensure that they are models of clarity and simplicity, and that we communicate with a common voice. These efforts have resulted in an array of benefits including greater organizational efficiency, reduced translation and other costs, and most importantly --- happier customers and employees. Now we would like to help others in the legal profession to do the same. The Adobe Legal Department Style Guide is available to anyone free of charge under a Creative Commons license.
Design system for a full-stack team
We're building software helping most demanding online advertisers improve their performance. To stay on top of the competitive, rapidly changing space, the key focus for us has always been product development speed. As the team of the dev-driven company nearly tripled in the last two years, over a dozen of Smartly.io App UI changes go live every day.
Roman is telling about Smartly.io’s experience building a sustainable design system helping company to prototype and take design decisions faster, improve collaboration between designers and developers, empower everyone to contribute to better design, and ultimately create better experience for the customers.
Lean prototyping for entrepreneurs
This document discusses lean prototyping for startups. It defines a prototype as an early version of an idea that is testable. Prototyping is recommended to answer questions, validate assumptions, compare alternatives, visualize ideas, and fail early. Good prototypes are quick to create, cheap, minimal, testable, and measurable. The document outlines a process for rapid and cheap prototyping without coding using tools like Keynote, including planning, building screens and interactions, testing with users, refining, and sharing. It promotes not getting attached to early ideas, prioritizing experiments over fantasies, continuous improvement over perfection, and using prototypes to tell stories.
Prototyping invision vs axure
How to create prototype and communicate it to other people.
Well known prototyping tools pros & cons.
iOS Dev Story
The document discusses iOS app development, including why to make mobile apps, how to get started, and resources for learning. It shares the story of one developer who created two apps - a browser called Cyberspace and an editor called Writing Kit. The developer broke the projects into components, shipped early versions, continued refining through updates, and promoted the apps through words of mouth, websites and advertising. The document recommends building something as a way to get started and provides a list of books, courses and forums for learning iOS development.
Wireframes for the Wicked
Wireframes beyond the basics, not for the weak at heart. In this panel, three experienced designers will share their tried and true tips for making wireframes really work. We'll talk about how to sketch a wireframe on the fly to demonstrate an idea and how to create a standalone wireframe deliverable; when to show a concept and when to describe nitty-gritty detail; how to make a narrative wireframe and how to make a specification wireframe. And best of all, we'll show you plenty of examples.
WRA 210 February 15, 2011
This document provides information about upcoming grades, an observer attending the next class, differences between web design and development careers, examples of web design job postings, and homework assignments. It discusses the differences between web designers who focus on visual design elements and web developers who work more with coding. Web design jobs typically require skills in HTML, CSS, graphics software, and an understanding of web architecture. Homework includes reading about color theory and bringing a website example needing color improvements to the next class.
Audits and Inventories: How To Mise en Place Your University's Website Redesign
This document discusses how to conduct audits and inventories as part of redesigning a website. It recommends starting with content audits and interface inventories to identify all existing patterns and inconsistencies. This lays the groundwork for establishing an effective design system using the Atomic Design methodology. Key aspects of the methodology include defining a shared vocabulary through an atomic workflow and creating a style guide and pattern library as the cornerstone of the new design. Presenting fully designed mockups is suggested as the most effective way to get stakeholder buy-in. The benefits outlined are cohesive experiences, increased team workflow, and establishing an accessible and future-proof foundation.
From Scratch to Launch #2 - Design phase
This document outlines the agenda for a WordPress meetup in Naperville on February 21, 2017. The meetup will include introductions from 6:20-6:30pm followed by a presentation from 6:30-7:30pm on building a website from scratch to launch. Various topics that will be discussed include typography guidelines, color resources, design inspiration sources, and design tools like Sketch and Photoshop. The next meetup will focus on front-end development on March 21, 2017.
Week1 2t
This document provides an overview of the WEBDEV2 course. The course focuses on website development for real clients, including planning, design, project management, and ensuring client satisfaction within constraints. Key objectives are understanding the web development process, analyzing client needs, managing client resources, recommending solutions, designing sites using HTML, CSS, JavaScript, PHP, and CMS. Students will work on weekly projects and a final group project to build a website for a real or existing company. Grading will be based on projects, documentation, participation, and quizzes. Course materials will be provided on Moodle.
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing as presented at Northern User Experience
Building (and Re-Building) the Airbnb Design System
When building a design system, many implicit choices are made in a component’s architecture that can end up crushing the dreams of a productivity-boosting frontend utility and turning a shared component library into a vessel for friction, factions, and forking. Join us as we take you through the journey of Airbnb’s experience creating an effective, widely-adopted design system and the decisions and trade-offs that were made to get there.
Presentation of web designing
This document provides an overview of web design, including its key elements and principles. It defines web design as the process of creating and arranging visual elements like layout, color, graphics, and fonts to present content on web pages for end users. The document outlines the main elements of web design and discusses factors that contribute to creating user-friendly designs, such as navigation, multimedia, compatibility, and technology. It emphasizes the importance of consistency in design and provides recommendations for developing a website.
Lean Prototyping - A Practical Guide
This document provides an overview of lean prototyping techniques for developing digital products. It discusses wireframing to conceptualize and layout the basic structure and elements of a design. This is followed by prototyping to create interactive versions that can be tested before finalizing designs. Different tools are suggested for wireframing, prototyping, and creating high- and low-fidelity mockups. Collaboration techniques like sharing prototypes and gathering feedback from various stakeholders are also covered.
Sculpting Text: Easing the Pain of Designing in the Browser
The document provides tips for designing webpages in the browser by focusing on structured content and a mobile-first approach. It recommends starting with plain HTML, focusing on content, color and type before layout. Designers should use developer tools and sketch before coding, adding complexity at breakpoint thresholds until the design breaks, then adding another breakpoint. This additive, content-focused process prepares the design for smallest screens in a progressive manner.
Design Considerations For Side Projects - Product Hunt Lagos
The document provides design considerations for side projects, including choosing a team as solo or group, prioritizing content based on risk and value, focusing on quality content over complex designs according to usability tests, and recommending tools like Bootstrap, Ionic, and Material Design for frameworks and design sprints to rapidly prototype through user testing.
Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - an...
There are many popular page builders out there—CornerStone, Beaver Builder, Site Origin’s “Page Builder,” Velocity Page, Themify, Divi, and more. Some are free. Others have multiple price tiers. This session won’t get into the ins and outs of which are best for production code, but I’ll demo a couple I’ve found helpful for quick turnaround projects.
In this talk, I’ll take a couple of my favorite page builders and show you why I like them, why I feel they’re good for your clients, and how to use them as a foundation for your own UI prototyping library.
Take aways:
• The benefits of using theme builders outside of the typical development process.
• How to get started and what to focus on.
• How to build a reusable toolkit to save time on future projects.
Carlos Sosa Resume
Carlos Sosa is a visual/UI designer seeking a senior level position. He has over 5 years of experience in graphic, web, and UI design. His experience includes redesigning websites, developing brand guidelines, designing digital illustrations, icons, and UI kits. He is proficient in programs like Photoshop, Illustrator, and Sketch. He has a B.A. in Art and experience working at companies like Sony Pictures Entertainment and Chapman/Leonard Studio Equipment.
Layout and Wireframing
The document discusses layout and wireframing for user interfaces. It begins by defining layout as the distribution of elements and wireframing as distribution schematics. The document then discusses how layout has evolved from prioritizing business goals to focusing on user goals. Key trends in 2014 include large hero areas, full background video, and cards. The document also covers best practices for wireframing such as starting with boxes and grayscale tones before deciding on a mockup or prototype. It recommends tools and further learning.
Branding office 365 with front end tooling
This document discusses branding Office 365 using front end tooling. It begins with an introduction of the presenter and defines the discussion topics. It then describes branding assets, current deployment methods, challenges with Office 365 versus on-premises, and Microsoft guidance. The bulk of the document demonstrates setting up a project with Node, Gulp, and other tools to deploy branding assets like master pages, styles, and page layouts in a faster, more automated way compared to traditional methods. It highlights pros and cons of the approach and potential for hybrid scenarios. Key takeaways emphasize Office 365 branding changes and guidance to use alternative methods to custom master pages when possible.
Design Pattern Craftsmanship
Slides from a presentation I gave at Front-End Design Conference and ForgeConf in 2014. My first Design Pattern Craftsmanship talk in 2012 was presented at Etsy's Code as Craft series and I talked about MailChimp's original UI Pattern Library. Since then, we've redesigned and rebuilt our pattern library, so V2 of the talk covers the history, challenges, and benefits of our exploration of front-end patterns.
Creating Living Style Guides to Improve Performance
Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
More Related Content
What's hot
The Adobe Legal Department Style Guide
The legal team at Adobe is constantly seeking creative new ways to better serve our customers and employees. Part of this effort has been the development of what we call The Adobe Legal Department Style Guide. We use it as the foundation of the way we create and revise our agreements, processes, policies and trainings to ensure that they are models of clarity and simplicity, and that we communicate with a common voice. These efforts have resulted in an array of benefits including greater organizational efficiency, reduced translation and other costs, and most importantly --- happier customers and employees. Now we would like to help others in the legal profession to do the same. The Adobe Legal Department Style Guide is available to anyone free of charge under a Creative Commons license.
Design system for a full-stack team
We're building software helping most demanding online advertisers improve their performance. To stay on top of the competitive, rapidly changing space, the key focus for us has always been product development speed. As the team of the dev-driven company nearly tripled in the last two years, over a dozen of Smartly.io App UI changes go live every day.
Roman is telling about Smartly.io’s experience building a sustainable design system helping company to prototype and take design decisions faster, improve collaboration between designers and developers, empower everyone to contribute to better design, and ultimately create better experience for the customers.
Lean prototyping for entrepreneurs
This document discusses lean prototyping for startups. It defines a prototype as an early version of an idea that is testable. Prototyping is recommended to answer questions, validate assumptions, compare alternatives, visualize ideas, and fail early. Good prototypes are quick to create, cheap, minimal, testable, and measurable. The document outlines a process for rapid and cheap prototyping without coding using tools like Keynote, including planning, building screens and interactions, testing with users, refining, and sharing. It promotes not getting attached to early ideas, prioritizing experiments over fantasies, continuous improvement over perfection, and using prototypes to tell stories.
Prototyping invision vs axure
How to create prototype and communicate it to other people.
Well known prototyping tools pros & cons.
iOS Dev Story
The document discusses iOS app development, including why to make mobile apps, how to get started, and resources for learning. It shares the story of one developer who created two apps - a browser called Cyberspace and an editor called Writing Kit. The developer broke the projects into components, shipped early versions, continued refining through updates, and promoted the apps through words of mouth, websites and advertising. The document recommends building something as a way to get started and provides a list of books, courses and forums for learning iOS development.
Wireframes for the Wicked
Wireframes beyond the basics, not for the weak at heart. In this panel, three experienced designers will share their tried and true tips for making wireframes really work. We'll talk about how to sketch a wireframe on the fly to demonstrate an idea and how to create a standalone wireframe deliverable; when to show a concept and when to describe nitty-gritty detail; how to make a narrative wireframe and how to make a specification wireframe. And best of all, we'll show you plenty of examples.
WRA 210 February 15, 2011
This document provides information about upcoming grades, an observer attending the next class, differences between web design and development careers, examples of web design job postings, and homework assignments. It discusses the differences between web designers who focus on visual design elements and web developers who work more with coding. Web design jobs typically require skills in HTML, CSS, graphics software, and an understanding of web architecture. Homework includes reading about color theory and bringing a website example needing color improvements to the next class.
Audits and Inventories: How To Mise en Place Your University's Website Redesign
This document discusses how to conduct audits and inventories as part of redesigning a website. It recommends starting with content audits and interface inventories to identify all existing patterns and inconsistencies. This lays the groundwork for establishing an effective design system using the Atomic Design methodology. Key aspects of the methodology include defining a shared vocabulary through an atomic workflow and creating a style guide and pattern library as the cornerstone of the new design. Presenting fully designed mockups is suggested as the most effective way to get stakeholder buy-in. The benefits outlined are cohesive experiences, increased team workflow, and establishing an accessible and future-proof foundation.
From Scratch to Launch #2 - Design phase
This document outlines the agenda for a WordPress meetup in Naperville on February 21, 2017. The meetup will include introductions from 6:20-6:30pm followed by a presentation from 6:30-7:30pm on building a website from scratch to launch. Various topics that will be discussed include typography guidelines, color resources, design inspiration sources, and design tools like Sketch and Photoshop. The next meetup will focus on front-end development on March 21, 2017.
Week1 2t
This document provides an overview of the WEBDEV2 course. The course focuses on website development for real clients, including planning, design, project management, and ensuring client satisfaction within constraints. Key objectives are understanding the web development process, analyzing client needs, managing client resources, recommending solutions, designing sites using HTML, CSS, JavaScript, PHP, and CMS. Students will work on weekly projects and a final group project to build a website for a real or existing company. Grading will be based on projects, documentation, participation, and quizzes. Course materials will be provided on Moodle.
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing as presented at Northern User Experience
Building (and Re-Building) the Airbnb Design System
When building a design system, many implicit choices are made in a component’s architecture that can end up crushing the dreams of a productivity-boosting frontend utility and turning a shared component library into a vessel for friction, factions, and forking. Join us as we take you through the journey of Airbnb’s experience creating an effective, widely-adopted design system and the decisions and trade-offs that were made to get there.
Presentation of web designing
This document provides an overview of web design, including its key elements and principles. It defines web design as the process of creating and arranging visual elements like layout, color, graphics, and fonts to present content on web pages for end users. The document outlines the main elements of web design and discusses factors that contribute to creating user-friendly designs, such as navigation, multimedia, compatibility, and technology. It emphasizes the importance of consistency in design and provides recommendations for developing a website.
Lean Prototyping - A Practical Guide
This document provides an overview of lean prototyping techniques for developing digital products. It discusses wireframing to conceptualize and layout the basic structure and elements of a design. This is followed by prototyping to create interactive versions that can be tested before finalizing designs. Different tools are suggested for wireframing, prototyping, and creating high- and low-fidelity mockups. Collaboration techniques like sharing prototypes and gathering feedback from various stakeholders are also covered.
Sculpting Text: Easing the Pain of Designing in the Browser
The document provides tips for designing webpages in the browser by focusing on structured content and a mobile-first approach. It recommends starting with plain HTML, focusing on content, color and type before layout. Designers should use developer tools and sketch before coding, adding complexity at breakpoint thresholds until the design breaks, then adding another breakpoint. This additive, content-focused process prepares the design for smallest screens in a progressive manner.
Design Considerations For Side Projects - Product Hunt Lagos
The document provides design considerations for side projects, including choosing a team as solo or group, prioritizing content based on risk and value, focusing on quality content over complex designs according to usability tests, and recommending tools like Bootstrap, Ionic, and Material Design for frameworks and design sprints to rapidly prototype through user testing.
Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - an...
There are many popular page builders out there—CornerStone, Beaver Builder, Site Origin’s “Page Builder,” Velocity Page, Themify, Divi, and more. Some are free. Others have multiple price tiers. This session won’t get into the ins and outs of which are best for production code, but I’ll demo a couple I’ve found helpful for quick turnaround projects.
In this talk, I’ll take a couple of my favorite page builders and show you why I like them, why I feel they’re good for your clients, and how to use them as a foundation for your own UI prototyping library.
Take aways:
• The benefits of using theme builders outside of the typical development process.
• How to get started and what to focus on.
• How to build a reusable toolkit to save time on future projects.
Carlos Sosa Resume
Carlos Sosa is a visual/UI designer seeking a senior level position. He has over 5 years of experience in graphic, web, and UI design. His experience includes redesigning websites, developing brand guidelines, designing digital illustrations, icons, and UI kits. He is proficient in programs like Photoshop, Illustrator, and Sketch. He has a B.A. in Art and experience working at companies like Sony Pictures Entertainment and Chapman/Leonard Studio Equipment.
Layout and Wireframing
The document discusses layout and wireframing for user interfaces. It begins by defining layout as the distribution of elements and wireframing as distribution schematics. The document then discusses how layout has evolved from prioritizing business goals to focusing on user goals. Key trends in 2014 include large hero areas, full background video, and cards. The document also covers best practices for wireframing such as starting with boxes and grayscale tones before deciding on a mockup or prototype. It recommends tools and further learning.
Branding office 365 with front end tooling
This document discusses branding Office 365 using front end tooling. It begins with an introduction of the presenter and defines the discussion topics. It then describes branding assets, current deployment methods, challenges with Office 365 versus on-premises, and Microsoft guidance. The bulk of the document demonstrates setting up a project with Node, Gulp, and other tools to deploy branding assets like master pages, styles, and page layouts in a faster, more automated way compared to traditional methods. It highlights pros and cons of the approach and potential for hybrid scenarios. Key takeaways emphasize Office 365 branding changes and guidance to use alternative methods to custom master pages when possible.
What's hot (20)
Audits and Inventories: How To Mise en Place Your University's Website Redesign
Audits and Inventories: How To Mise en Place Your University's Website Redesign
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Building (and Re-Building) the Airbnb Design System
Building (and Re-Building) the Airbnb Design System
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Design Considerations For Side Projects - Product Hunt Lagos
Design Considerations For Side Projects - Product Hunt Lagos
Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - an...
Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - an...
Viewers also liked
Design Pattern Craftsmanship
Slides from a presentation I gave at Front-End Design Conference and ForgeConf in 2014. My first Design Pattern Craftsmanship talk in 2012 was presented at Etsy's Code as Craft series and I talked about MailChimp's original UI Pattern Library. Since then, we've redesigned and rebuilt our pattern library, so V2 of the talk covers the history, challenges, and benefits of our exploration of front-end patterns.
Creating Living Style Guides to Improve Performance
Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
Building the impossible - Emails
The document discusses the challenges of building emails that are compatible across all email clients and browsers. Some key issues mentioned include:
- Background images often do not display properly
- CSS support is limited so inline styles must be used
- Lists, colors, whitespace, and images can cause display problems in some clients
- There are thousands of email clients across many devices and operating systems that all must be tested
Building cross-client compatible emails requires supporting outdated markup standards and meticulous testing across many email programs.
How UI Framework improves design process
Learn how UI Framework improves design processn and why it is helpful for building web software products and encouraging rapid prototyping in Agile software enviroments
Brad frost: Atomic design (Webdagene 2014)
The document discusses the concept of atomic design for building interfaces and design systems. It provides examples of existing style guides and pattern libraries. It also describes how atomic design breaks interfaces down into basic elements called atoms, and combines them into larger components called molecules, organisms and templates. Real content can then be piped into the templates.
Design Pattern Libraries
Design Pattern Libraries explores the process of creating, maintaining, and evolving a design language using a pattern library. This talk explains how to identify, document, share and iterate design patterns, build consensus throughout large organizations, and create a uniform user experience in the process. Pattern libraries are living, breathing systems, and this presentation shows how to evolve patterns and create a library that keeps pace with product release cycles as well as changes in technology and an organization's brand.
How UI Framework improves design process - 2015 (Dribbble meetup)
This document outlines how a UI framework can improve the design process. It discusses some common problems like miscommunication between teams and inconsistent design. It then introduces a UI framework as a living library of patterns, standards, and behaviors that provides benefits like allowing reuse of assets, rapid prototyping, and standardized elements. It covers the framework's foundation including colors, grids, typography. It also covers components, patterns, and additional resources that are part of the framework.
The Death of Lorem Ipsum & Pixel Perfect Content
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
Style Guides Are The New Photoshop (Fronteers 2012)
A slightly modified version of the talk I first presented at Smashing Conference, now presented at Fronteers 2012. (http://fronteers.nl/congres/2012)
Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.
Viewers also liked (9)
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
How UI Framework improves design process - 2015 (Dribbble meetup)
How UI Framework improves design process - 2015 (Dribbble meetup)
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Similar to Style Guides in the Wild
Front-end style guides - fronteers @ WHITE (30/08/12)
This document discusses front-end style guides and their benefits. A style guide aims to improve team collaboration by defining a uniform style and formatting for websites and projects. It takes decisions like code formatting, naming conventions, and design elements out of the hands of developers. This ensures consistency and makes a project's starting point very clear. Style guides can also be a useful reference for new team members or interns. The document provides examples of style guides and tips for creating an effective guide.
User Interface Tips and Tricks for the Power User - Penelope Coventry
Often information workers are asked to make their SharePoint site look pretty. This session will look at what a power user should and should not do to enhance the User Interface of sites. It will include explanations of page types, master pages and Page Layouts as well as what is responsive web design. Then using no-code, Penny will amend the look and feel of page, including composed looks, adding buttons to the Ribbon and the List Item Menu. This is not a developer session and will cover both SharePoint in Office 365, and on-premises installations of SharePoint 2013.
Intro to Branding by Randy Drisgill and John Ross - SPTechCon
This document provides an overview of branding SharePoint 2010 sites both within a farm and online. It introduces the presenters Randy Drisgill and John Ross, both SharePoint MVPs from Rackspace Hosting. The agenda covers important branding terms, approaches to branding including page editing, themes, CSS and master pages. It demonstrates low, medium and high effort branding techniques for both on-premise and online SharePoint sites.
Developing Style Guides at Light Speed with Fabricator
This document introduces Fabricator, an open source tool that combines style guides and UI toolkits into a single living document. It allows for easy modularization of CSS, JavaScript, and assets and provides automatic bundling and minification. Fabricator uses technologies like Gulp, Browserify, Markdown, SASS, HTML, and CSS to build visual style guides with code samples. It addresses issues organizations face with maintaining consistent branding across distributed teams working on multiple client projects. The document demonstrates Fabricator and notes that while it requires some maintenance and documentation is still developing, it can help align marketing goals through a shared visual dictionary of a brand's design system.
Cheat sheets for coding
Cheat sheets are concise references that provide quick instructions for accomplishing coding tasks. They can be used for memory refreshing, avoiding reinventing solutions, and building knowledge over time. Developers make cheat sheets freely available online, and they can also be obtained from colleagues, friends, tutorials, and online communities. Examples include cheat sheets for web designers, WordPress, and HTML5.
Dario_DiFelice_Resume
This document is a resume for Dario Di Felice, an experienced multimedia developer and senior front end developer. It outlines his technical skills which include languages like PHP, jQuery, CSS and tools like Photoshop. His professional experience includes roles developing websites for Rogers Communications and Bell Media. He is seeking a challenging position developing rich media and web applications where he can apply his skills in areas like user experience design, search engine optimization and social media.
SharePoint Branding - Change Your Look
A SharePoint Branding 101 session originally presented at SharePoint Saturday Silicon Valley, June 2012
Connecting Intelligent Content with Micropublishing and Beyond
Don Day presents on connecting intelligent content with micropublishing. He discusses different types of content renditions like infographics, single-page websites, microsites, and micropublishing ezines. Day argues these can be unified through a structured content framework like DITA. He demonstrates migrating an existing presentation into DITA and rendering it in different formats including a white paper, ezine, one-page site, and website to show how content can be reused across formats. Day concludes the process is repeatable and teaches how to better leverage content value.
Web designtrends 5-29-2013
This document provides an overview of 10 web design trends for 2013 based on an e-book on web and mobile design trends. The trends discussed include:
1) Prioritizing content over design and ensuring a consistent user experience across devices.
2) Simplicity in design and interaction through minimalism, clear layouts, and focus on typography.
3) User-centered design through storytelling, personality in style, and focus on the user's purpose over design specifics.
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
How to create a WordPress site that will last and how to avoid mistakes that will come to haunt you later. This was my presentation in the WPHelsinki on 2.11.2016.
Go Brand Yourself!
Presented to students as a part of AIGA's EMERGE: Prepared event, Patrick talks about finding, owning, and refining your personal brand. And since he's not a sausage, he would know a thing or two about that.
Enhancing SharePoint with Responsive Web Design
Presented at SharePoint Saturday Bend, how to properly integrate and use Responsive Web Design in SharePoint 2010.
Branding SharePoint for Evolving Internet Devices
The document discusses how organizations need to prepare their SharePoint intranets for the increasing use of mobile devices. It examines options for making SharePoint accessible across different devices, including device-specific interfaces, responsive web design, and the new device channels feature in SharePoint 2013. The author advocates for using responsive design to create a single interface that adapts to different screens through CSS. He also suggests using device channels in SharePoint 2013 to handle special device cases.
html5 css3 the future of web technology
The document is a presentation about HTML5 and CSS3 by Dang Minh Tuan. It discusses what HTML5 and CSS3 are, who develops them, who supports them, who uses them, and how to learn them. It encourages starting projects with HTML5 and CSS3 now despite any fears or doubts, as they allow for more innovative designs and an improved user experience compared to older technologies. The presentation provides examples and references to support its points.
Visual Design for Content Management Systems
This presentation was given to students at Boston University's Center for Digital Imaging Arts in Waltham, MA.
Things to Budget for When Planning a Drupal Implementation
This presentation, done for the Drupal Business Summit in 2012, covers factors that must be considered when planning Drupal implementations of medium to high complexity.
Using CSS Paging to Render DITA Documents
Introduces CSS pagination features and their strengths and limitations. Suggests that CSS for pagination is much easier to use, maintain, and staff than using XSL-FO, especially using the PDF2 transform provided with the DITA Open Toolkit. Describes the currently-available CSS pagination implementations.
Your Road to Modern Communication Sites
This document provides a summary of modern communication sites in Office 365 and how to migrate to them. It discusses the evolution of communication and collaboration technologies over time from early SharePoint versions to modern sites. It introduces communication sites and their capabilities, including out-of-the-box web parts, customization options like themes, and using the SharePoint Framework. It emphasizes the importance of change management, training, and governance when migrating to ensure a successful transition.
Prototyping like it is 2022
Iterating and shipping software quickly to help you build what users want. Keeping it simple and scaling architecture over time, not right away.
ECS19 - Katja Jokisalo - Modernize your Intranet
The document discusses strategies for modernizing SharePoint sites from classic to modern experiences. It recommends using the Modernization Scanner to assess sites for classic features no longer supported in modern. It also recommends the Page Transformation Engine to convert pages while preserving content using an XML configuration file. The key aspects of modernization are removing subsites and customizations not supported in modern, and rebuilding the information architecture using new structures like hubs and navigation.
Similar to Style Guides in the Wild (20)
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
User Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope Coventry
Intro to Branding by Randy Drisgill and John Ross - SPTechCon
Intro to Branding by Randy Drisgill and John Ross - SPTechCon
Developing Style Guides at Light Speed with Fabricator
Developing Style Guides at Light Speed with Fabricator
Connecting Intelligent Content with Micropublishing and Beyond
Connecting Intelligent Content with Micropublishing and Beyond
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
Things to Budget for When Planning a Drupal Implementation
Things to Budget for When Planning a Drupal Implementation
Recently uploaded
Astute Business Solutions | Oracle Cloud Partner |
Your goto partner for Oracle Cloud, PeopleSoft, E-Business Suite, and Ellucian Banner. We are a firm specialized in managed services and consulting.
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Are you ready to revolutionize how you handle data? Join us for a webinar where we’ll bring you up to speed with the latest advancements in Generative AI technology and discover how leveraging FME with tools from giants like Google Gemini, Amazon, and Microsoft OpenAI can supercharge your workflow efficiency.
During the hour, we’ll take you through:
Guest Speaker Segment with Hannah Barrington: Dive into the world of dynamic real estate marketing with Hannah, the Marketing Manager at Workspace Group. Hear firsthand how their team generates engaging descriptions for thousands of office units by integrating diverse data sources—from PDF floorplans to web pages—using FME transformers, like OpenAIVisionConnector and AnthropicVisionConnector. This use case will show you how GenAI can streamline content creation for marketing across the board.
Ollama Use Case: Learn how Scenario Specialist Dmitri Bagh has utilized Ollama within FME to input data, create custom models, and enhance security protocols. This segment will include demos to illustrate the full capabilities of FME in AI-driven processes.
Custom AI Models: Discover how to leverage FME to build personalized AI models using your data. Whether it’s populating a model with local data for added security or integrating public AI tools, find out how FME facilitates a versatile and secure approach to AI.
We’ll wrap up with a live Q&A session where you can engage with our experts on your specific use cases, and learn more about optimizing your data workflows with AI.
This webinar is ideal for professionals seeking to harness the power of AI within their data management systems while ensuring high levels of customization and security. Whether you're a novice or an expert, gain actionable insights and strategies to elevate your data processes. Join us to see how FME and AI can revolutionize how you work with data!
Dandelion Hashtable: beyond billion requests per second on a commodity server
This slide deck presents DLHT, a concurrent in-memory hashtable. Despite efforts to optimize hashtables, that go as far as sacrificing core functionality, state-of-the-art designs still incur multiple memory accesses per request and block request processing in three cases. First, most hashtables block while waiting for data to be retrieved from memory. Second, open-addressing designs, which represent the current state-of-the-art, either cannot free index slots on deletes or must block all requests to do so. Third, index resizes block every request until all objects are copied to the new index. Defying folklore wisdom, DLHT forgoes open-addressing and adopts a fully-featured and memory-aware closed-addressing design based on bounded cache-line-chaining. This design offers lock-free index operations and deletes that free slots instantly, (2) completes most requests with a single memory access, (3) utilizes software prefetching to hide memory latencies, and (4) employs a novel non-blocking and parallel resizing. In a commodity server and a memory-resident workload, DLHT surpasses 1.6B requests per second and provides 3.5x (12x) the throughput of the state-of-the-art closed-addressing (open-addressing) resizable hashtable on Gets (Deletes).
Public CyberSecurity Awareness Presentation 2024.pptx
Cyber security awareness slides for a busisness by TreeTop Security
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
A Mix Chart displays historical data of numbers in a graphical or tabular form. The Kalyan Rajdhani Mix Chart specifically shows the results of a sequence of numbers over different periods.
TrustArc Webinar - 2024 Global Privacy Survey
How does your privacy program stack up against your peers? What challenges are privacy teams tackling and prioritizing in 2024?
In the fifth annual Global Privacy Benchmarks Survey, we asked over 1,800 global privacy professionals and business executives to share their perspectives on the current state of privacy inside and outside of their organizations. This year’s report focused on emerging areas of importance for privacy and compliance professionals, including considerations and implications of Artificial Intelligence (AI) technologies, building brand trust, and different approaches for achieving higher privacy competence scores.
See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar will review:
- The top 10 privacy insights from the fifth annual Global Privacy Benchmarks Survey
- The top challenges for privacy leaders, practitioners, and organizations in 2024
- Key themes to consider in developing and maintaining your privacy program
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
Programming Foundation Models with DSPy - Meetup Slides
Prompting language models is hard, while programming language models is easy. In this talk, I will discuss the state-of-the-art framework DSPy for programming foundation models with its powerful optimizers and runtime constraint system.
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Free A4 downloadable and printable Cyber Security, Social Engineering Safety and security Training Posters . Promote security awareness in the home or workplace. Lock them Out From training providers datahops.com
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift
Overview
Dive into the world of anomaly detection on edge devices with our comprehensive hands-on tutorial. This SlideShare presentation will guide you through the entire process, from data collection and model training to edge deployment and real-time monitoring. Perfect for those looking to implement robust anomaly detection systems on resource-constrained IoT/edge devices.
Key Topics Covered
1. Introduction to Anomaly Detection
- Understand the fundamentals of anomaly detection and its importance in identifying unusual behavior or failures in systems.
2. Understanding Edge (IoT)
- Learn about edge computing and IoT, and how they enable real-time data processing and decision-making at the source.
3. What is ArgoCD?
- Discover ArgoCD, a declarative, GitOps continuous delivery tool for Kubernetes, and its role in deploying applications on edge devices.
4. Deployment Using ArgoCD for Edge Devices
- Step-by-step guide on deploying anomaly detection models on edge devices using ArgoCD.
5. Introduction to Apache Kafka and S3
- Explore Apache Kafka for real-time data streaming and Amazon S3 for scalable storage solutions.
6. Viewing Kafka Messages in the Data Lake
- Learn how to view and analyze Kafka messages stored in a data lake for better insights.
7. What is Prometheus?
- Get to know Prometheus, an open-source monitoring and alerting toolkit, and its application in monitoring edge devices.
8. Monitoring Application Metrics with Prometheus
- Detailed instructions on setting up Prometheus to monitor the performance and health of your anomaly detection system.
9. What is Camel K?
- Introduction to Camel K, a lightweight integration framework built on Apache Camel, designed for Kubernetes.
10. Configuring Camel K Integrations for Data Pipelines
- Learn how to configure Camel K for seamless data pipeline integrations in your anomaly detection workflow.
11. What is a Jupyter Notebook?
- Overview of Jupyter Notebooks, an open-source web application for creating and sharing documents with live code, equations, visualizations, and narrative text.
12. Jupyter Notebooks with Code Examples
- Hands-on examples and code snippets in Jupyter Notebooks to help you implement and test anomaly detection models.
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Simplify your search for a reliable Python development partner! This list presents the top 10 trusted US providers offering comprehensive Python development services, ensuring your project's success from conception to completion.
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
Predictive maintenance is a proactive approach that anticipates equipment failures before they happen. At the forefront of this innovative strategy is Artificial Intelligence (AI), which brings unprecedented precision and efficiency. AI in predictive maintenance is transforming industries by reducing downtime, minimizing costs, and enhancing productivity.
HCL Notes and Domino License Cost Reduction in the World of DLAU
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-and-domino-license-cost-reduction-in-the-world-of-dlau/
The introduction of DLAU and the CCB & CCX licensing model caused quite a stir in the HCL community. As a Notes and Domino customer, you may have faced challenges with unexpected user counts and license costs. You probably have questions on how this new licensing approach works and how to benefit from it. Most importantly, you likely have budget constraints and want to save money where possible. Don’t worry, we can help with all of this!
We’ll show you how to fix common misconfigurations that cause higher-than-expected user counts, and how to identify accounts which you can deactivate to save money. There are also frequent patterns that can cause unnecessary cost, like using a person document instead of a mail-in for shared mailboxes. We’ll provide examples and solutions for those as well. And naturally we’ll explain the new licensing model.
Join HCL Ambassador Marc Thomas in this webinar with a special guest appearance from Franz Walder. It will give you the tools and know-how to stay on top of what is going on with Domino licensing. You will be able lower your cost through an optimized configuration and keep it low going forward.
These topics will be covered
- Reducing license cost by finding and fixing misconfigurations and superfluous accounts
- How do CCB and CCX licenses really work?
- Understanding the DLAU tool and how to best utilize it
- Tips for common problem areas, like team mailboxes, functional/test users, etc
- Practical examples and best practices to implement right away
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks creates AI-boosted business software that helps employees work more efficiently and effectively. Managing data across multiple RDBMS and NoSQL databases was already a challenge at their current scale. To prepare for 10X growth, they knew it was time to rethink their database strategy. Learn how they architected a solution that would simplify scaling while keeping costs under control.
Fueling AI with Great Data with Airbyte Webinar
This talk will focus on how to collect data from a variety of sources, leveraging this data for RAG and other GenAI use cases, and finally charting your course to productionalization.
Taking AI to the Next Level in Manufacturing.pdf
Read Taking AI to the Next Level in Manufacturing to gain insights on AI adoption in the manufacturing industry, such as:
1. How quickly AI is being implemented in manufacturing.
2. Which barriers stand in the way of AI adoption.
3. How data quality and governance form the backbone of AI.
4. Organizational processes and structures that may inhibit effective AI adoption.
6. Ideas and approaches to help build your organization's AI strategy.
Choosing The Best AWS Service For Your Website + API.pptx
Have you ever been confused by the myriad of choices offered by AWS for hosting a website or an API?
Lambda, Elastic Beanstalk, Lightsail, Amplify, S3 (and more!) can each host websites + APIs. But which one should we choose?
Which one is cheapest? Which one is fastest? Which one will scale to meet our needs?
Join me in this session as we dive into each AWS hosting service to determine which one is best for your scenario and explain why!
5th LF Energy Power Grid Model Meet-up Slides
5th Power Grid Model Meet-up
It is with great pleasure that we extend to you an invitation to the 5th Power Grid Model Meet-up, scheduled for 6th June 2024. This event will adopt a hybrid format, allowing participants to join us either through an online Mircosoft Teams session or in person at TU/e located at Den Dolech 2, Eindhoven, Netherlands. The meet-up will be hosted by Eindhoven University of Technology (TU/e), a research university specializing in engineering science & technology.
Power Grid Model
The global energy transition is placing new and unprecedented demands on Distribution System Operators (DSOs). Alongside upgrades to grid capacity, processes such as digitization, capacity optimization, and congestion management are becoming vital for delivering reliable services.
Power Grid Model is an open source project from Linux Foundation Energy and provides a calculation engine that is increasingly essential for DSOs. It offers a standards-based foundation enabling real-time power systems analysis, simulations of electrical power grids, and sophisticated what-if analysis. In addition, it enables in-depth studies and analysis of the electrical power grid’s behavior and performance. This comprehensive model incorporates essential factors such as power generation capacity, electrical losses, voltage levels, power flows, and system stability.
Power Grid Model is currently being applied in a wide variety of use cases, including grid planning, expansion, reliability, and congestion studies. It can also help in analyzing the impact of renewable energy integration, assessing the effects of disturbances or faults, and developing strategies for grid control and optimization.
What to expect
For the upcoming meetup we are organizing, we have an exciting lineup of activities planned:
-Insightful presentations covering two practical applications of the Power Grid Model.
-An update on the latest advancements in Power Grid -Model technology during the first and second quarters of 2024.
-An interactive brainstorming session to discuss and propose new feature requests.
-An opportunity to connect with fellow Power Grid Model enthusiasts and users.
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Recently uploaded (20)
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Style Guides in the Wild
- 1. STYLE GUIDES IN THE WILD
- 3. • Freelance Developer based in Sevenoaks • Front End & Technical Consultant on National Theatre 2016 website (launches 12th April) • Front End Developer on Brighton Fringe 2016 website (live) • Other recent clients include Macmillan, Independent Age, Odeon WHAT DO YOU KNOW?
- 4. • “A set of standards for the design of documents, signage, and any other form of other brand identifier” • Broad coverage for print • Very limited online reference WHAT IS A STYLE GUIDE?
- 5. • The same design elements would change page by page • CSS and HTML becomes messy and not semantic • Bloated code and hard to implement WHAT WAS WRONG?
- 7. • Focused design • Content independent • Documented • Quicker build • Quicker integration LIVING STYLE GUIDES
- 8. • Style the base elements • Build up modules to handle possible content • Document each module • Build everything from the ground up, evolving what already exists • Build pages last and from designed modules HOW?
- 9. TOOLS http://styleguides.io/ WEBSITE STYLE GUIDE RESOURCES
- 10. STYLE GUIDE BOILERPLATE https://github.com/mattbee/Style-Guide-Boilerplate Forked from http://bjankord.github.io/Style-Guide-Boilerplate/
- 12. • Brighton Fringe 2016 • Complex ticketing and performance based design and development • Drupal integration • Flexible for future theming CASE STUDY
- 13. • Document all the content and required modules • Design based on wireframes containing all modules • Clear theme and style for throughout the site DESIGN
- 14. • Build atoms and base styles/elements first • Build each module from constituent parts, building on existing styles • Build out pages last • http://brightonfringe.review-now.net/ BUILD
- 15. • Tight timelines met • Really easy implementation in Drupal • Easier bug fixing due to modules structure • Easy to use modules to integrate for new types of content in Drupal • Easy to update style guide for 2017 festival theme SUCCESS
- 16. — Nobody at Starbucks WE DO SOME THINGS RIGHT - WE MIGHT NOT PAY OUR TAXES, BUT WE HAVE AN AWESOME STYLE GUIDE ” “ http://www.starbucks.com/static/reference/styleguide/
- 17. THANKS Next Up: Calum Ryan - Taking Part in the IndieWeb Matt Bee http://www.todayishould.com http://www.twitter.com http://www.mattbee.co.uk