Designing-for-Drupal.pdf - Google Drive

DESIGNING FOR

DRUPAL

ethan macdonald Designer / Front-end Developer @ghanbak ethan-macdonald.com

DESIGN PYRAMID * Execute Look & Feel User Stories Mission / Soul

DESIGN DELIVERABLES Content Strategy Prototypes/Wireframes Style Tiles Hi-Fi Mockups

CONTENT STRATEGY Content is King Identify the Mission or Soul Seek to understand the mission Take on the mission as your own Constant communication

PROTOTYPES / WIREFRAMES Draw the layouts Prototypes break down barriers

START EARLY & PRODUCE OFTEN

PROTOTYPES RULE

PROTOTYPES RULE Allows flexibility Gives client a more tactile experience of the functionality Removes any guesswork from static wireframing technique

STYLE TILES Mood Board Shows overall feel Colors Imagery Iconography Typography Treatment of custom elements

STYLE TILES

HI-FI MOCKUPS Hit it hard Homepage, Products, Blog, Staff, Case Studies, Etc. Iterate - it won’t be perfect

HI-FI MOCKUPS

CLIENT EXPECTATIONS

CLIENT EXPECTATIONS Clients expect a lot Tips to maintaining expectations Tips for understanding the client

CLIENTS EXPECT A LOT

BE ADAPTABLE Explore different avenues Don’t box yourself in Be flexible but not stupid Work with the client to explore new ideas

MAINTAINING THE ALOT Consistent Communication Don’t stop talking. Include the client as a team member. Honesty and openness

UNDERSTANDING THE ALOT Don’t just build, use. Create an account. Use the site Having an account opens doors

DESIGN PYRAMID * Execute Look & Feel User Stories Mission / Soul

RYAN GERMICK Google Doodle Team Lead @ryangermick

The Design Process: A Pyramid by William Newton on medium.com https://medium.com/@willdjthrill/the-design-process-a-pyramid-c77135c177d4

FIND THE MISSION / SOUL Everybody has a mission/purpose Find your client’s mission Adopt their mission as your own

DEVELOP USER STORIES Understand how users interact with the site Follow logical steps to get to info Research user habits and patterns

CREATE THE LOOK & FEEL Mission + Function = Knowledge Having knowledge informs design Use type and color for hierarchy Use imagery for depth and meaning Use icons for visual cues

EXECUTE

EXECUTE Some call this a launch Start of the problem flood Always something missed

ADD PIZZAZZ Animations Button states :hover, :focus, :active Smooth out transitions Add subtle elements

DESIGN PYRAMID * Execute Look & Feel User Stories Mission / Soul

Q&A

ethan macdonald Designer / Front-end Developer @ghanbak ethan-macdonald.com