Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Techniques for Designing with Drupal 8

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

YouTube-Videos werden auf SlideShare nicht mehr unterstützt.

Original auf YouTube ansehen

Techniques for Designing with Drupal 8
Daniel Schiavone
blog.froont.com/brief-history-of-web-design-for-designers
Wird geladen in …3
×

Hier ansehen

1 von 42 Anzeige

Techniques for Designing with Drupal 8

Herunterladen, um offline zu lesen

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (19)

Ähnlich wie Techniques for Designing with Drupal 8 (20)

Anzeige

Aktuellste (20)

Anzeige

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

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”

×