Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Techniques for Designing with Drupal 8

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.

  • Be the first to comment

  • Be the first to like this

Techniques for Designing with Drupal 8

  1. 1. Techniques for Designing with Drupal 8 Daniel Schiavone
  2. 2. blog.froont.com/brief-history-of-web-design-for-designers
  3. 3. What’s Next? TRENDS Mobile Tablets Beyond Desktop Aggregation DESIGN Heros Video Minimalism Flat
  4. 4. What’s Next? TRENDS Mobile Desktop is still popular Tablets Beyond Desktop Aggregation DESIGN Heros Video Minimalism Flat
  5. 5. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Aggregation DESIGN Heros Video Minimalism Flat
  6. 6. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Uncharted territory Aggregation DESIGN Heros Video Minimalism Flat
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 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 Today’s scrolling text Minimalism Limited use cases Flat Hybrids are more friendly
  12. 12. https://www.drupal.org/drupalorg/blog/a-new-design-system
  13. 13. Process
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. Inspiration principles.design frankchimero.com jensimmons.com 5by5.tv/webahead jasonsantamaria.com drupalparadise.com smashingmagazine.com alistapart.com siteinspire.com abduzeedo.com dribbble.com cmsdesigns.org/cms/drupal designmadeingermany.de/sites-we-like
  18. 18. 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 ???
  19. 19. 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

×