Drupal 8 Design Techniques
•Als PPTX, PDF herunterladen•
0 gefällt mir•78 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. Join this detailed discussion on web design and designing Drupal 8 websites. Where to start? So often the creative process begins with a blank page. Does the approach to design change when working with Drupal? Drupal is not a blank slate. As designers and themers, we have to consider structures inherent in all Drupal sites like regions, blocks, displays and views. We’ll look at specific structures found in every Drupal 8 site and discuss approaches to design that leverage the output that Drupal provides. With a rich medium like Drupal to work with processes have to change. We’ll explore how the design process fits into the development process. How we can make the design process more agile and how can we incorporate design into a project. We’ll discuss the difference between theming and design and their role in building out a new Drupal 8 site. Then we’ll talk about managing all this and how the design process fits into a large development project. What are the responsibilities of the designer? What are their deliverables? We’ll propose a standard list of design deliverables and touch upon style guides, wireframes and mood boards. Since creativity is all about invention and inspiration we’ll explore the cutting edge of web design and how future releases of Drupal 8 might shift the way we design websites and how we interact with them.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ähnlich wie Drupal 8 Design Techniques
Ähnlich wie Drupal 8 Design Techniques (20)
Mehr von Snake Hill Web Agency
Mehr von Snake Hill Web Agency (9)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Drupal 8 Design Techniques
- 1. Techniques for Designing with Drupal 8 Daniel Schiavone
- 7. What’s Next? TRENDS Mobile Desktop is still popular Tablets Beyond Desktop Aggregation DESIGN Heros Video Minimalism Flat
- 8. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Aggregation DESIGN Heros Video Minimalism Flat
- 9. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Uncharted territory Aggregation DESIGN Heros Video Minimalism Flat
- 10. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Uncharted territory Aggregation Google, Twitter Cards DESIGN Heros Video Minimalism Flat
- 11. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Uncharted territory Aggregation Google, Twitter Cards DESIGN Heros Today’s slider Video Minimalism Flat
- 12. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Uncharted territory Aggregation Google, Twitter Cards DESIGN Heros Today’s slider Video Today’s scrolling text Minimalism Flat
- 13. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Uncharted territory Aggregation Google, Twitter Cards DESIGN Heros Today’s slider Video Today’s scrolling text Minimalism Limited use cases Flat
- 14. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Uncharted territory Aggregation Google, Twitter Cards DESIGN Heros Today’s slider Video Today’s scrolling text Minimalism Limited use cases Flat Hybrids are more friendly
- 33. Process
- 36. We spend an inordinate amount of time making our pixel-perfect fabrications. We then make sub-optimal decisions based on this, considering only our single, perfect state. We are surprised when our designs are implemented because we forgot to solve a variety of edge cases and problems. When we don’t work with real data, we deceive ourselves. Modern Design Tools: Using Real Data, Josh Puckett
- 37. Ideas/Inspiration Dribble Behance Muzli(In) Wireframe/ Brainstorming Balsamiq Conceptboard Handoff Zeplin Avocode Inspect(In) Frontify Craft(In) Brand.ai Tools More at Cool Tools http://www.bit.ly/cooltoolsmd Baltimore Drupal Meetup’s @briangallagher @diamondseacom Visual Design Sketch Figma Photoshop Illustrator Invision Conceptboard Prototype Craft(In) Invision Marvel Atomic Principle Flinto Framer Proto.io Axure Adobe XD Keynote Justinmind Froont Webflow Workflow Github Lingo
- 38. Food for thought Everything easy is hard again, Frank Chimero We Need Design That Is Faster and Design That Is Slower., L. Jeffrey Zeldman Modern Design Tools: Using Real Data, Josh Puckett The state of design tools in 2017, Sandijs Ruluks Things I’ve Learned About CSS Grid Layout, Ollie Williams
- 40. 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 Insert ???
- 41. Questions Daniel Schiavone www.SnakeHill.net Daniel@SnakeHill.net @schiavo @Snake_Hill DDO: schiavone Community Drupal4Gov / DrupalGovCon July 31 - Aug 2 meetup.com/Baltimore-Drupal-Meetup Baltimore DrupalCamp coming Fall 2018 SmallDrupalShop.slack.com
Hinweis der Redaktion
- [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
- 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
- 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.
- 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/
- 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?)
- 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
- 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!
- 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
- 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!!!
- 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 New possibilities = CSS Grid (grid that’s not applied to entire pages but individual elements) Cleaner Flexible No more 12 columns
- 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
- 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?
- 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
- Process Know your audience Know your message We are in the communication business
- Process Audience acquisition funnel R Crumb doing business diagrams
- Process - How do we start? Low fidelity prototyping Many techniques including Paper and pencil Sticky notes Online tools [list Balsamiq Mockplus.com Sketch
- 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
- 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
- Process - Style guide Reference for the Front End developers Limited scope (sub atomic level) Not effective for design review Documentation
- [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
- 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
- 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
- Tools How do tools influence design? tools + ideals = style style + ideals = tools
- 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
- 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
- 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
- [Add more? Drupal specific?]
- [Add more? Drupal specific?] Add to Drupal Design Leaders
- Who’s registered on DDO? Who’s on drupal.slack.com See my DrupalCon presentation, “Big Changes for Small Agencies”