Techniques for Designing with Drupal 8
•
0 likes•68 views
Designing for the web is complicated. Endless screen sizes, high user expectations and usability challenges offer up some interesting if not impossible challenges for web designers, especially when wrestling with complex functionality delivered by Drupal. This is a detailed discussion on web design and specific challenges when designing Drupal 8 websites.
Recommended
More Related Content
What's hot
What's hot (12)
Similar to Techniques for Designing with Drupal 8
Similar to Techniques for Designing with Drupal 8 (20)
More from Snake Hill Web Agency
More from Snake Hill Web Agency (9)
Recently uploaded
Recently uploaded (20)
Techniques for Designing with Drupal 8
- 1. Techniques for Designing with Drupal 8 Design 4 Drupal 2017 Daniel Schiavone
- 13. Design Principles Obvious and self-explanatory Time is of the essence Focus attention Content first Simplify White space Visual language Conventions Repurpose Design Elements Reuse graphical elements Use graphics responsively
- 14. Challenges ● Designers vs Programmers ● The Blank Canvas ● The Right Tools ● Process
- 15. Designers vs. Programmers ● What is a web designer? ● Who are these web designers? ● What is a Themer?
- 24. Process
- 33. Process
- 35. Tools Invision Zeplin Balsamiq Conceptboard Font Awesome colorschemedesigner.com More at Cool Tools http://www.bit.ly/cooltoolsmd Baltimore Drupal Meetup’s @briangallagher @diamondseacom
- 37. Drupal Design Community Social Networks groups.drupal.org/drupal-design drupal.slack.com (design channel) Drupal Design Leaders Emma Jane Hogbin Westby emmajane.net Dani Nordin (Zen Kitchen) tzk-design.com
- 38. Questions Daniel Schiavone www.SnakeHill.net Daniel@SnakeHill.net @schiavo @Snake_Hill DDO: schiavone Community Baltimore Drupal Meetup → 2nd Wed @ Bertha’s meetup.com/Baltimore-Drupal-Meetup Baltimore / DC Drupal Co-working DrupalGovCon - July 31 - August 2 Baltimore DrupalCamp (Coming this fall!)
Editor's Notes
- [In general make use of presentation medium - transitions and reveals] About audience Who’s a web design Who’s a themer? Who’s a front end developer? Who knows the difference? Intro Design 4 Drupal - Great that we have a Drupal event focusing on design Lots of questions, some answers Could be 3 or 4 sessions and a dozen blog posts Agenda The History of Art Web Design Challenges Process Tools
- To understand where we’re going we need to understand where we’ve been Art Web Design History Primitivism Medieval Renaissance Modernism Brutalism Next ? Post-modernism Primitivism
- Primitivism - 1992 - first tools Web design - HTML text only, images in 1993 First website created by created by Berners-Lee in 1991 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. The first website was activated in 1991 created by Berners-Lee. On 30 April 1993, CERN announced that the World Wide Web would be free to anyone.
- Medieval Phase - visual narratives for the illiterate Web design - HTML + Tables Organize/group elements The Dark Ages? - Cultural and economic deterioration that supposedly occurred in Western Europe following the decline of the Roman Empire The Plague
- Medieval Phase 1995 - 2002 Web design - HTML + Tables, Php & Ruby released David's Siegel's book Creating Killer Sites. Designers would make a fancy layout, but it was up to developers to break it into small pieces and figure out the best way to make that design work. The Dark Ages - Dot-com Bubble collapses 2000 - 2001
- Dark Ages 2000 - 2002 Dot-com bubble
- The Renaissance - 2002 - 2006 Renaissance Techniques Advances in perspective Chiaroscuro
- The Renaissance - 2002 - 2006 Web design - Javascript, Flash, CSS The designer could design any shapes, layouts, animations, interactions, use any font (replace DPGraph) [Better example showing js and flash]
- Modernism Reaction to photography The Medium is the Message - Marshall McLuhan Truth to medium Awareness of object Conceptualism
- Modernism - 2007 - present Reaction to mobile Mobile first Web design - Grids, Frameworks, Parallax Design Trends - Flat Design
- [need goofier image] Modernism - 2007 - present Trends - Hero Image Web design - Hero Image, JS frontends Open vs Closed Web → The coming conflict
- What’s Next? Trends - Brutalism / Postmodernism - Looking back (we have a whole 25 years) Conservative site using controversial design? SU Campus →← Conflicting architectural forms/compatible [New slide?] A design movement with it’s own website brutalistwebsites.com/
- [Does this slide fit? Expand or remove?] Nothing in your theme should be content specific Need more specific stuff here… examples?
- [Is this slide necessary?] Designers vs Programmers Drupal built by developers for developers (this is a good thing) Terminology: Front End Developer, UX, 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?) The Blank Canvas Use “the nails on the wall” Patterns vs Overall Gestalt Measurements (px, pt, %, em, rem) The Right Tools Print vs Web E.g. “below the fold”, carriage returns, word breaks, placing images with the Wysiwyg Why are we still talking about this? Education of clients Tools
- [Image?] [Drupal Community References?] Designers vs Programmers Drupal built by developers for developers (this is a good thing) Terminology: Front End Developer, UX, 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?) What is a web designer? Does a web designer need to know HTML? Layout Typography Color Branding How does UX fit in? Who are these web designers Print designers who design for the web Programmers who end up coding the front end Specially trained web designers Designing in teams? What is a themer 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!
- 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
- 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!!!
- We are still designing within the frame The frame is a moving target
- Underlying Problems/Challenges Is it possible to design for all shapes and sizes? Is mobile first working for us? For the clients? Which mobile device are we designing for? The smallest? A watch? Maybe but the results can’t look like that comp or anything else you show the client What does designing for endless shapes and sizes look like?
- This was a good idea at the time
- 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
- [what is the point being made with this slide?] Imagining Possibilities But maybe there are other possibilities? Is there a better way? What’s next? Grid systems still depend on a predetermined width
- 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?
- [Is this slide necessary?] [Better image?] Where to start? More often than not Design is thought of as a waterfall process How often does the final site match the initial comps? Should it? Can the design process adopt an iterative approach Design starts in discovery → ends at launch → but client often continues because we’ve given them design tools
- Ask why? “Why do you want a website” “Everyone tells me I need one” is not the answer Pre-requisites of Design Branding Elevator pitch (this IS hard) Who we are What we do How we can help you Business process
- Audience - acquisition funnel R Crumb doing business diagrams
- How do we start the design process? Low fidelity prototyping Many techniques including Paper and pencil Sticky notes Online tools [list Balsamiq Mockplus.com Sketch
- 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
- This could be an entire session 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
- Style guide Reference for the Front End developers Limited scope (sub atomic level)
- [Include responsive versions of same molecule/organ] ] Style tiles [Other examples?] Defines molecules
- 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
- [Need to add UX and Content Development] [insert image of x-rayed painting to see agile in art] 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
- 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
- [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)
- [Add more? Drupal specific?]
- [Add more? Drupal specific?] Add to Drupal Design Leaders