Die SlideShare-Präsentation wird heruntergeladen. ×

Techniques for Designing with Drupal 8

Snake Hill Web Agency

•

30. Apr 2018

• •

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

What’s Next?
TRENDS
Mobile
Tablets
Beyond Desktop
Aggregation
DESIGN
Heros
Video
Minimalism
Flat

What’s Next?
TRENDS
Mobile Desktop is still popular
Tablets
Beyond Desktop
Aggregation
DESIGN
Heros
Video
Minimalism
Flat

What’s Next?
TRENDS
Mobile Desktop is still popular
Tablets Flat growth
Beyond Desktop
Aggregation
DESIGN
Heros
Video
Mini...

What’s Next?
TRENDS
Mobile Desktop is still popular
Tablets Flat growth
Beyond Desktop Uncharted territory
Aggregation
DES...

What’s Next?
TRENDS
Mobile Desktop is still popular
Tablets Flat growth
Beyond Desktop Uncharted territory
Aggregation Goo...

What’s Next?
TRENDS
Mobile Desktop is still popular
Tablets Flat growth
Beyond Desktop Uncharted territory
Aggregation Goo...

What’s Next?
TRENDS
Mobile Desktop is still popular
Tablets Flat growth
Beyond Desktop Uncharted territory
Aggregation Goo...

What’s Next?
TRENDS
Mobile Desktop is still popular
Tablets Flat growth
Beyond Desktop Uncharted territory
Aggregation Goo...

What’s Next?
TRENDS
Mobile Desktop is still popular
Tablets Flat growth
Beyond Desktop Uncharted territory
Aggregation Goo...

https://www.drupal.org/drupalorg/blog/a-new-design-system

Process

We spend an inordinate amount of time making our pixel-perfect fabrications.
We then make sub-optimal decisions based on t...

Ideas/Inspiration
Dribble
Behance
Muzli(In)
Wireframe/
Brainstorming
Balsamiq
Conceptboard
Handoff
Zeplin
Avocode
Inspect(...

Food for thought
Everything easy is hard again, Frank Chimero
We Need Design That Is Faster and Design That Is Slower., L....

Inspiration
principles.design
frankchimero.com
jensimmons.com
5by5.tv/webahead
jasonsantamaria.com
drupalparadise.com
smas...

Drupal Design Community
Social Networks
groups.drupal.org/drupal-design
drupal.slack.com (design
channel)
Drupal Design Le...

Questions
Daniel Schiavone
www.SnakeHill.net
Daniel@SnakeHill.net
@schiavo
@Snake_Hill
DDO: schiavone
Community
Drupal4Gov...

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Techniques for Designing with Drupal 8

Nächste Präsentationen

Nächste SlideShare

The 2011 trends in interactive design

The 2011 trends in interactive design

Wird geladen in …3

×

Hier ansehen

Prototyping with Framer.js

Do you have founder myopia?

Balanced Team LeanUX NYC Social

Fast Food Design

Mobile Interaction Design & Strategy

Visual tools for the sp ia sp intersections - nov 2014

Smart / Responsive Mobile Design

Shiloh Barnat Goodman

Digital design workshop

Katherine Barrow

Techniques for Designing with Drupal 8

30. Apr 2018

• •

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.

Snake Hill Web Agency

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.

Weitere Verwandte Inhalte

Prototyping with Framer.js

Do you have founder myopia?

Balanced Team LeanUX NYC Social

Fast Food Design

Mobile Interaction Design & Strategy

Visual tools for the sp ia sp intersections - nov 2014

Smart / Responsive Mobile Design

Shiloh Barnat Goodman

Digital design workshop

Katherine Barrow

Hour of Code 2015 - Elementary School

Frances Coronel

Communication with Flexible Documentation : Jon Hadden

The Design in Responsive Design

Developers, get off the couch and contribute!

Tool Talk: Popplet

Lean Startup Co.

Making Drupal Cool Again

Soft real time interrupts for squishy humans

Structured UX Thinking : Jon Fisher

Researchers in the digital age

Web Design Toolbox

How To Create Awesome Products

Prototyping with Framer.js

Do you have founder myopia?

Balanced Team LeanUX NYC Social

Fast Food Design

Mobile Interaction Design & Strategy

Visual tools for the sp ia sp intersections - nov 2014

Prophets trends-in-interactive-design

Robert Kostka-Zawadzki

Decoding design(ers) tinkerform

ATDTK18 - design patterns for emergent learning technologies

MIMA 2014 - Changing your Responsive Design Workflow

Responsive Web Design

Web Design Trends e-Book

Web Design Book Of Trends 2015 2016

Web Design Trends 2015 & 2016

Designing better user interfaces

Designing Mobile Interfaces - Goodpatch Workshop SF

Boris Friedrich Milkowski

Embracing Uncertainty: Learning to Think Responsively

Startups, Volcanoes, and Texting Refrigerators

One Mighty Roar

Designing and developing products for multiple platforms

Being a Little Agile

Look into Azure Active Directory

Goto berlin 10-2014

Courtney Hemphill

Frugal Web Development

Teaching Your Client Android Design, or, Don't Be An iPhoney

Big guns for small guys (reloaded)

Jorge López-Lago

Android design lecture #1

Prophets trends-in-interactive-design

Robert Kostka-Zawadzki

Decoding design(ers) tinkerform

ATDTK18 - design patterns for emergent learning technologies

MIMA 2014 - Changing your Responsive Design Workflow

Responsive Web Design

Web Design Trends e-Book

Analyzing the Market for Drupal - Baltimore DrupalCamp 2018

Snake Hill Web Agency

4 Essential Checklist to Manage Drupal Projects

Snake Hill Web Agency

Techniques for Designing with Drupal 8

Snake Hill Web Agency

A Custom Drupal Theme in 40 Minutes

Snake Hill Web Agency

Drupal Upgrade Decision Tree

Snake Hill Web Agency

Designing with Drupal 8

Snake Hill Web Agency

The Ultimate Drupal Launch Checklist

Snake Hill Web Agency

10 Steps Not To Forget After Installing Drupal

Snake Hill Web Agency

Snake Hill Web Agency

Analyzing the Market for Drupal - Baltimore DrupalCamp 2018

Snake Hill Web Agency

4 Essential Checklist to Manage Drupal Projects

Snake Hill Web Agency

Techniques for Designing with Drupal 8

Snake Hill Web Agency

A Custom Drupal Theme in 40 Minutes

Snake Hill Web Agency

Drupal Upgrade Decision Tree

Snake Hill Web Agency

Designing with Drupal 8

Snake Hill Web Agency

Basic_First_Aid.ppt

16 Strategies for Growth

medical devises and its uses with image in hospital ppt.pptx

Understanding Website Traffic.pptx

End User Computing at CloudHesive.pptx

business model and internet of things

ACLS (4) (1).pptx

Best Clothing Store for Tweens

Does a Hybrid model for vulnerability Management Make Sense.pdf

UNIT-X MIRCO BIRTH PLANNING B.Sc Nursing IV year CHN.pptx

VanillaJS & the Web Platform, a match made in heaven?

Bertrand Delacretaz

Salesforce Spring 23 Webinar

AoC code glofing.pdf

Preventive measures. Blog. pptx

Urinary Catheterization Nursing Procedure & Management ppt.pptx

List of medical emergencies 4.4.22 lecture.pptx

SHASHANK KUMAR 27300720002.pptx

first aid in Insects bites and heat stroke.pptx

Compliance 101 HITRUST Update.pdf

Basic_First_Aid.ppt

16 Strategies for Growth

medical devises and its uses with image in hospital ppt.pptx

Understanding Website Traffic.pptx

End User Computing at CloudHesive.pptx

business model and internet of things

Techniques for Designing with Drupal 8

1. Techniques for Designing with Drupal 8 Daniel Schiavone
2. blog.froont.com/brief-history-of-web-design-for-designers
3. What’s Next? TRENDS Mobile Tablets Beyond Desktop Aggregation DESIGN Heros Video Minimalism Flat
4. What’s Next? TRENDS Mobile Desktop is still popular Tablets Beyond Desktop Aggregation DESIGN Heros Video Minimalism Flat
5. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Aggregation DESIGN Heros Video Minimalism Flat
6. What’s Next? TRENDS Mobile Desktop is still popular Tablets Flat growth Beyond Desktop Uncharted territory Aggregation DESIGN Heros Video Minimalism Flat
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. 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. 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. 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. 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. https://www.drupal.org/drupalorg/blog/a-new-design-system
13. Process
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. 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. 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. 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. 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. 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”