Techniques for Designing with Drupal 8

Editor's Notes

• #2: [In general make use of presentation medium - transitions and reveals] About audience Who’s a web designer? Who’s a themer? Who’s a front end developer? Who knows the difference? Intro Snake Hill Artist → Developer → Business owner (Deal with everything) Continuous innovation / improvement (including design) Design sells (Picture words thing) Lots of questions, some answers Could be 3 or 4 sessions and a dozen blog posts Agenda The state of the art Designing with Drupal Process The role of tools End with inspiration
• #3: The State of the Art What is beautiful? What is good design? To understand where we’re going we need to understand where we’ve been
• #4: We’ve come a long way… First website created by created by Berners-Lee in 1991 Web design - HTML text only, images in 1993 First webserver was created on a NeXT computer First browser Nexus, followed by Netscape in 1994 The World Wide Web began as a CERN project named ENQUIRE, initiated by Tim Berners-Lee in 1989 and Robert Cailliau in 1990.[17] The project was intended to facilitate the sharing of information between researchers. On 30 April 1993, CERN announced that the World Wide Web would be free to anyone.
• #6: Design can take us to unexpected places - Full circle? Trends - Minimalism to Brutalism 25 years of web design history (different talk) Conservative site using controversial design SU Campus →← Conflicting architectural forms/compatible [New slide?] A design movement with it’s own website brutalistwebsites.com/
• #16: Designing with Drupal → Designers vs Programmers [Drupal Community References?] Drupal built by developers for developers (this is a good thing) Terminology: Front End Developer, UX Designer, UI Designer, Web Designer, Themer Drupal community needs to include and attract designers Designers need to stake out their territory Design showcase on DDO Front End channel on drupal.slack.com (is Front End Design?)
• #17: Designing with Drupal → Who are the designers? UX Designer vs UI Designer vs Web Designer Front End Developer vs Themer vs Designer Not necessarily different people / different roles What makes a designer a web designer? Designers Know Layout Typography Color Branding Web Designers Know HTML CSS Behaviors Interactivity
• #18: Designers vs Programmers Who are the designers? Who are these web designers Print designers who design for the web Programmers who end up coding the front end Specially trained web designers Design teams? Is there such a thing as a Wordpress Themer Yes but know one calls themselves that Code? I’m a designer Broad skill set that touches everything… IMPOSSIBLE!
• #19: Designing with Drupal - The Canvas Blank Canvas vs Existing Nails Is the canvas blank? Use “the nails on the wall” Patterns vs Overall Gestalt Measurements (px, pt, %, em, rem) When should you design Comps are dangerous Design adds functionality and programming time
• #20: Drupal 8 simple installation Every theme starts with… Regions - defined in the theme.yml Blocks - defined in configuration The biggest surprise in Drupal 8 is the resurgence of blocks As of 8.3 Layout Module in core Now we have custom blocks Blocks can be reused in different regions More things are blocks (e.g. Title) Video did not play!!!
• #21: This was a good idea at the time
• #22: Maybe this is best solution we have right now But responsive design has only been around for 8 years or so now Add 100% width New possibilities = CSS Grid (grid that’s not applied to entire pages but individual elements) Cleaner Flexible No more 12 columns
• #24: We are still designing within the frame The frame is a moving target The frame is the biggest influencer of design Are we distracted by the frame? Imagining Possibilities But maybe there are other possibilities? Is there a better way? What’s next? Grid systems still depend on a predetermined width
• #25: Screen = frame Why do most sites scroll vertically? With touch screens we scroll horizontally, vertically, every which way Vertical scroll may meet expectations but is it always the best way? Will hybrid laptops catch on?
• #26: Process - Where to start? Ask why? “Why do you want a website” “Everyone tells me I need one” is not an answer Pre-requisites of Design Branding Elevator pitch (this IS hard) Who we are What we do How we can help you Business process
• #27: Process Know your audience Know your message We are in the communication business
• #28: Process Audience acquisition funnel R Crumb doing business diagrams
• #29: Process - How do we start? Low fidelity prototyping Many techniques including Paper and pencil Sticky notes Online tools [list Balsamiq Mockplus.com Sketch
• #30: Process - Next step is often a wireframe But have we already crossed the line Is this what the client is going to expect once they see this? Educate client
• #31: This could be an entire session Process - molecular design Every Drupal build starts with Content Types In Drupal 8 everything including Content Types, Blocks and Taxonomy terms are Entities Entities have displays Multiple displays for different contexts Displays organize and layout fields View displays Atomic Design Atoms (Elements created by standard markup: Text Fields, Drop downs, Tables, Titles, Lists) Molecules - (Elements created with multiple atoms. In Drupal: Regions, Blocks, Entity displays, View displays) Catalogue Drupal patterns Atoms Heading (H1, H2...) Links Body Unordered List Numbered LIst Blockquote Collapsible Fieldsets Form fields (Text, Select, etc.) Buttons (Default Submit Button, etc.) More button/Read more link Tags Molecules View display (page, block, Unformatted, Grid, etc…) Pagination View filters VBO Pagination Basic Node Style (Default) Messages (Error, Status, Warning, Help) Secondary tabs (on node) Regions (Header, Footer, etc.) Admin Tabs (secondary tabs) Basic Node Style Node links Default Block & variations) Default Profile Layout Breadcrumbs
• #32: Process - Style guide Reference for the Front End developers Limited scope (sub atomic level) Not effective for design review Documentation
• #33: [Include responsive versions of same molecule/organ] Process - Style tiles [Other examples?] Defines molecules Some clients won’t be able to invision the end product from style tyles
• #34: Mood boards are cool Mood boards present molecular design without committing to specific layouts Unlike Style Tiles they offer a glimpse into the overall gestalt of a design Examples Drupal.org design process is well documented on DDO for all to see https://www.drupal.org/drupalorg/blog/a-new-design-system
• #35: Process - Design in Agile [Need to add UX and Content Development] [insert image of x-rayed painting to see agile in art] More often than not Design is thought of as a waterfall process How often does the final site match the initial comps? Should it? Design starts in discovery → ends at launch → but client often continues because we’ve given them design tools If development is iterative why not design (UI and Visual Design) [what’s the difference?] Design can’t be first → Need to have stuff to design Process Design as a team Design throughout development Know site building
• #36: Tools How do tools influence design? tools + ideals = style style + ideals = tools
• #37: Tools Why are we using photo editing software to design webpages? Is the web a pixel medium or a vector medium? Or is it a text medium? Would Illustrator make more sense? All our development process are built around iteration but our design process is a waterfall process Tools do determine the look / be mindful Web developers love creating tools so there’s no shortage But don’t let the tools restrict possibilities
• #39: Tools - Developers have lot’s of tools, design tools are catching up [Create resource document for the talk][Add tools from D4D Keynotes] [Other tools?] Invision Review design comps with unlimited collaborators, inline commenting, review, approval Zeplin Designer must be on Mac or Windows Collaborative Design that generates styleguides and resources Balsamiq - https://balsamiq.com/ Collaborative wireframe sketching Font Awesome Conceptboard - https://conceptboard.com Visual collaboration Cool Tools http://www.bit.ly/cooltoolsmd Baltimore Drupal Meetup’s (@briangallagher @diamondseacom) froala.com/design-blocks feathericons.com/ colorschemedesigner.com
• #40: Modern Design Tools: Using Real Data, Josh Puckett https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482 The state of design tools in 2017, Sandijs Ruluks http://blog.froont.com/the-state-of-design-tools-2017 WE NEED DESIGN THAT IS FASTER AND DESIGN THAT IS SLOWER., L. Jeffrey Zeldman https://www.zeldman.com/2018/02/24/need-design-faster-design-slower/ Everything easy is hard again, Frank Chimero https://frankchimero.com/writing/everything-easy-is-hard-again
• #41: [Add more? Drupal specific?]
• #42: [Add more? Drupal specific?] Add to Drupal Design Leaders
• #43: Who’s registered on DDO? Who’s on drupal.slack.com See my DrupalCon presentation, “Big Changes for Small Agencies”