The benefits of creating a website with a good design that is visually appealing to users and essential tips in designing a website that is appealing, engaging, and effective. Certain key points include: planning, design, functionality, content, and engagement. This presentation was given at WordCamp Jacksonville 2019.

1. What Makes Good Design
and How To Design It?
By Charlene Bond

2. About me.
 Founder of Prolific Xpressionz
 Currently maintain & support 30+ websites
 Using WordPress since 2011
 Designing for the web since 2006
@CharleneEBond

3. Overview
01 What is Design? 02 Planning
03 Color Scheme 04 Content
05 Responsive Design 06 Q&A

4. What is Design?
A plan or drawing used to show the appearance and
function of something before it is developed.

5. Planning
 Create a Site Map
A site map helps ensure organized content
and effective user navigation.

7. Design
 Layout
 Color Scheme
 Font Style and Size
 Photos/Videos
 Devices to be viewed on

8. A mockup is a replica of how the website will look including
color and styling.
Layout
 Create a Wireframe

9. Wireframe
1. Header
I. Logo/Tagline
II. Navigation Menu
2. Hero Section
I. Slider
II. Image
III. Background Video
3. Content Section
4. Footer
I. Copyright ©
II. Footer Navigation

10. A color palette is a range of colors used to define elements
of your business and make it recognizable to customers.
Color Scheme
 Create a Color Palette

11.  Choosing the Right Colors for Your Website
Excitement
Urgency
Impulse
Simplicity
Futuristic
Modern
Luxury
Power
Stability

12. Color Scheme
 Dominant Color
 Background Color
 Complimentary/Accent Color

13. Color Scheme
 Dominant Color
 Background Color
 Complimentary/Accent Color

15. Colors
 Dominant Color
 Background Color
 Complimentary/Accent Color

16. Color Tips
 Use Adobe Color for ideas.
 The dominant color should be the color that “pops” on the website.
 Be mindful of the feelings associated with colors you choose.
 Complementary colors can be used as accent colors.
 Background color should help complete the design and make content
easy to read.

17. Content
 Font Style
 Font Size
 Images/Video

23. Alt Text
 Make it descriptive
 Provide context
 Keep it short

24. A mockup is a replica of how the website will look including
color and styling.
Responsive Design
 Create a Mockup

25. For Mobile For Desktop

27. Let’s Connect
@CharleneEBond
Facebook.com/charleneebond2
Linkedin.com/in/charleneebond
@CharleneEBond