This document summarizes a WordPress meetup event that took place in Beirut on January 8th, 2019. The meetup included talks on connecting designers and developers, with a designer presenting to developers on getting them involved earlier, and a developer presenting to designers on considerations for documentation, technology, interactivity, content, responsiveness, and exceptions when designing for websites. The document also provides information on contributing to future WordPress meetups in Beirut.

1. WordPress Beirut 19th Meetup - 8th January 2019
7:00 - Mingle/Networking/coffee/Hello
7:10 - Intro
7:15 - Designer message to Developer by Carole Maroun
8:00 - Break
8:15 - Developer message to Designer by Ali Basheer
9:00 - Closing
fb.com/wpbeirut
wpbeirut.org
WhatsApp Group

2. Ali Basheer @alibasheer
WordPress Developer
At Strategies dC

3. How did you heard about the
meetup
● Previous WP Meetup
● Facebook
● Friend
● WordPress admin widget

4. WordPress Beirut
● Contribution
● Every 1st Tuesday/Month
● Started July 2017
● One of 600 WP Meetups

6. You can Help:
● Speak at meetup
○ No level of experience
○ Your Story with WP
○ SEO topic
○ Business & Freelance
○ Content & branding
● Suggest ideas/topics
● Spread the word
● Start a meetup

7. Connecting the dots between
Designers and Developers

8. Before we proceed I’d like to emphasize that
this is not a specific grievance but rather an
itemized list of years of disagreements.

9. Developer vs
Designer
● Disconnected till sharing files
● Different way of work (graphics
vs code
● Different ways of solving
problems (guidelines vs more
code)

10. Getting Developers
Involved Early
● Including developers in
conference calls with clients
● Seeking insights from
developers on design elements
● Running initial design ideas past
developers

11. Designer message to Developer
by Carole Maroun

12. Developer message to Designer
by Ali Basheer

13. Designing for
Documentation
● PSD (layers organized,
named..)
● Create brief style guide
(colors, spacings, and
contexts..)
● Title size 22px and a line
height of 92px !!

14. Designing for
Technology
● Let’s do fancy stuff privately, not on
production project with deadline
● Focus on what should be done
rather than what can be done
● You are more than artist, you are a
designer
● Try to achieve as much as possible
with only HTML and CSS.
● Images, don’t use filters at all –
(max shadows)
● Don’t fake transparent images
(overlay)
● Design for framework (e.g:
Bootstrap,..)

15. Designing for
Interactivity
● Link states (active, hover, visited)
● Buttons for mobile (42px axis)
● Radio and Checkboxes states
● Decide what conventions you’re
going to use for interactive
elements, and don’t use them on
anything else.
● Don’t use primary brand color to
indicate links, especially if you’ll
use the same solution to
accentuate important content!

16. Designing for
Content
● Remember that you're working with
dynamic content. (too much to fit
or too little of it)
● If there is missing content (Image,
title!)
● If section is not populated, do we
remove it or show no items msg
● Design user notifications and stick
to them
● Avoid fixed width/height blocks or
buttons
● Content have same structure (Don’t
style differently, don’t manually
break text)

17. Designing for
Responsiveness
● Mobile is reflaw of Desktop and
not separate page
● Content groups should be
shared across all layouts
(column breaks are consistent)
● Provide large enough pictures
for parallax

18. Designing
Exceptions
● Exceptions are always possible
● When using a complex design is
justified, I’ll go about writing the
rendering logic in JavaScript if I
need to.

20. The Gap Between Developers
and Designers is Disappearing
● New tools that help
● Adobe: XD instead of Photoshop
(video)
● Zeplin
● InVision

21. Thank you