BRIDGING THE GAP BETWEEN DESIGN & DEVELOPMENT WHO WE ARE BETH - - PowerPoint PPT Presentation

▶
bridging the gap between design development who we are
SMART_READER_LITE
LIVE PREVIEW

BRIDGING THE GAP BETWEEN DESIGN & DEVELOPMENT WHO WE ARE BETH - - PowerPoint PPT Presentation

Aug 13, 2022 197 likes •580 views

BRIDGING THE GAP BETWEEN DESIGN & DEVELOPMENT WHO WE ARE BETH SODERBERG ELLEN AMARAL THE DEVELOPER THE DESIGNER @bethsoderberg empamaral@gmail.com CREATE SMART DESIGN FILES RETINA READY Double your dimensions & resolution and

slide-1
SLIDE 1

BRIDGING THE GAP BETWEEN DESIGN & DEVELOPMENT

slide-2
SLIDE 2

BETH SODERBERG

THE DEVELOPER @bethsoderberg

ELLEN AMARAL

THE DESIGNER empamaral@gmail.com

WHO WE ARE

slide-3
SLIDE 3

CREATE SMART DESIGN FILES

slide-4
SLIDE 4
slide-5
SLIDE 5

RETINA READY

Double your dimensions & resolution and set your units to points.

slide-6
SLIDE 6
slide-7
SLIDE 7

GRIDS

Create your grid using brightly colored rectangles with lower opacity.

slide-8
SLIDE 8

GRIDS

Say goodbye to margins and padding and hello to 24 column grids.

slide-9
SLIDE 9
slide-10
SLIDE 10

TYPE

Always specify the line-height for all your typographic elements.

slide-11
SLIDE 11

TYPE

Anything that will end up being a WYSIWYG should be designed within a single text box.

slide-12
SLIDE 12

TYPE

Once you’re designing within that single text box, use the “Paragraph- After Spacing”

  • ption.
slide-13
SLIDE 13
slide-14
SLIDE 14

IMAGERY

Smart objects are your friends.

slide-15
SLIDE 15

IMAGERY

Smart objects that are vectors are your best friends.

slide-16
SLIDE 16

IMAGERY

Stop cropping and place your images within a container.

slide-17
SLIDE 17

DEVELOP WITH DESIGN IN MIND

slide-18
SLIDE 18
slide-19
SLIDE 19

CREATE SMART DEFAULTS

  • Use a starter theme to create your own custom

base theme.

  • Or....create a custom child theme to recycle.
  • Include helpful tools in your base theme: task

runners, CSS preprocessors, CSS frameworks, grid systems.

slide-20
SLIDE 20
slide-21
SLIDE 21

DEVELOP FOR DESIGN INTEGRITY

  • Make custom styles for the WYSIWYG editor.
  • Add default images/icons.
  • Descriptively label everything in the admin.
  • Make reasonable character and word limits.
slide-22
SLIDE 22

DEVELOP FOR DESIGN INTEGRITY

  • Make elements appear conditionally.
  • Make icons programmatic.
  • Always answer the question: “What if X isn’t

there? What will it look like?”

slide-23
SLIDE 23
slide-24
SLIDE 24

WRITE EXTENSIBLE CODE

  • Use CSS preprocessors: partials, mixins, and

variables are your friends!

  • Don’t put JavaScript everywhere.
  • Comment all of the things.
slide-25
SLIDE 25

TALK TO EACH OTHER

slide-26
SLIDE 26

TALK TO YOUR DESIGNER...WHEN BROWSER COMPATIBILITY MODERNIZES.

slide-27
SLIDE 27

TALK TO YOUR DEVELOPER...IF YOU HAVE A COOL IDEA.

slide-28
SLIDE 28

TALK TO YOUR DEVELOPER...BEFORE YOU SHOW THE CLIENT YOUR DESIGNS.

slide-29
SLIDE 29

TALK TO YOUR DESIGNER...AND SHARE REAL FEEDBACK WHEN REVIEWING COMPS.

slide-30
SLIDE 30

TALK TO YOUR DESIGNER...BEFORE YOU START BUILDING.

slide-31
SLIDE 31

TALK TO YOUR DESIGNER...WHEN YOU FIND MISTAKES IN THE COMPS.

slide-32
SLIDE 32

TALK TO YOUR DEVELOPER...IF YOU CAN CODE.

slide-33
SLIDE 33

TALK TO YOUR DEVELOPER...INSTEAD OF CREATING RESPONSIVE DESIGN COMPS.

slide-34
SLIDE 34

TALK TO YOUR DESIGNER...WHEN YOU’RE IMPROVISING TO STYLE UNFORESEEN DESIGN ELEMENTS.

slide-35
SLIDE 35

TALK TO YOUR DEVELOPER...WHEN YOU FIND VISUAL MISTAKES IN THE WEBSITE.

slide-36
SLIDE 36

THANK YOU BETH & ELLEN

http://bethsoderberg.com/slides/2016/wordcamp-lancaster/slides.pdf

slide-37
SLIDE 37

RESOURCES

  • Popular Base Themes

* Underscores (http://underscores.me/) * Bones (http://themble.com/bones/) * Sage (https://github.com/roots/sage)

  • WordPress Default Themes Based on Underscores

* Twenty Thirteen (https://wordpress.org/themes/twentythirteen/) * Twenty Fourteen (https://wordpress.org/themes/twentyfourteen/) * Twenty Fifteen (https://wordpress.org/themes/twentyfjfteen/) * Twenty Sixteen (https://wordpress.org/themes/twentysixteen/)

  • Task Runners:

* Grunt (http://gruntjs.com/) * Gulp (http://gulpjs.com/)

slide-38
SLIDE 38

RESOURCES

  • CSS Preprocessors:

* Sass (http://sass-lang.com/) * Less (http://lesscss.org/)

  • CSS Frameworks:

* Compass (http://compass-style.org/) * Foundation (http://foundation.zurb.com/) * Bootstrap (http://getbootstrap.com/) * Skeleton (http://getskeleton.com/)

  • Grid Systems:

* Suzy (http://susy.oddbird.net/) * Singularity (http://singularity.gs/)