One approach to website design, user experience, user interface best practices.

1. Website Design Workflow
One Perspective — Stephen B. Starr Design
steve@stephenbstarrdesign.com
stephenbstarrdesign.com
linkedin.com/in/stephenbstarr
instagram.com/stephenbstarr

2.  Create an easy to use experience
 Create a delightful experience
verses a painful experience
(try not to suck)
Design / UX Goals

3. Understanding Client Objectives
 Write a proposal that demonstrates a clear understanding of your
client’s objective
 Be more insightful than your client in intuiting how their message will
translate to a digital experience

4. Understanding Client Objectives

5. Know Your Client’s Audience
 How will your client’s audience best receive their key message in a
digital experience
 Be more insightful than your client in reminding them of ALL possible
audiences who will see their website

6. Know Your Client’s Audience
Copyright Estate of Ed Paschke

7. Create Your Sitemap With the Tool at Hand
 Give Adobe Creative Cloud a chance
 Sharlene King, Designer at Morningstar, Inc. uses InDesign for
enterprise site page creation

8. Create Your Sitemap With the Tool at Hand

9. Create Your Sitemap With the Tool at Hand

10. Create Your Sitemap With the Tool at Hand
 Slickplan.com
 Lucidchart.com
 Gliffy.com
 OmniGraffle.com

11. What Design and UX/UI Issues Can you Address
in The Wireframe?
 Specific navigation, language usage and design issues can be made
at the Wireframe stage
 Using the client’s language in a creative, provocative way may
stimulate the creative process
 Branding can begin to emerge

12. Start UGLY and let go of perfection

13. Design and UX/UI Issues in the Wireframe

14. Design and UX/UI Issues in the Wireframe
 What resources are available in
time and money?
 How literate is your client in digital
communication?

15. Design and UX/UI Issues in the Wireframe
 balsamiq.com
 axure.com
 adobe.com/ExperienceDesign

16. Committing to a Design
 Give photo editing software a chance
 Follow the direction of the development track you have worked out
with your developer
 Follow the development parameters you know are achievable
 Create a “mood board” with your visual assets

17. Committing to a Design

18. Committing to a Design
 Look carefully at typography — the more you “think through” your
typography, the more successful your UX will be
 Decide what your H1, H2, H3, H4, H5, etc. tags will be
 Accessible Design = Good Design
Believe. Grow.
Achieve

19. Committing to a Design
 Will you use a san serif with a serif font? If so, look at them together
 Less is more, said the design maestro Mies van der Rohe
Mantis Dentistry & Implant Center
Believe. Grow. Achieve

20. Committing to a Design
 Create a color palette— it will save you time in the long run
 Barclay’s colour picker! — Barclay Missen, The Sandbox Agency
 color.adobe.com

21. Committing to a Design

22. Committing to a Design

23. Committing to a Design

24. Committing to a Design

25. Committing to a Design
 Meet with your client as frequently as you need to assure they
understand the direction you are taking
 BE FLEXIBLE to change when the client wants an alternate direction
 Procure your client’s buy in to the design fully before you begin
development

26. Committing to a Design
 Know where you are going with
mobile—don’t back yourself
into a corner

27. Committing to a Design

28. What does a designer do during development?
 Prepare your design files as thoroughly as you can for your developer
 If you are proficient in CSS, communicate changes in CSS
 Look at your CSS changes in a browser — Chrome inspect
 Be open to “happy accidents”

29. Go Live – Match development space to live
 Export your .sql database with the “right” information
 From URL and To URL must be accurate
 From Absolute path and To Absolute path must be accurate
 WP Migrate Plugin
 Interconnectit.com — Search-Replace-DB-master

30. Go Live – Match development space to live
 absolutepath.php
<?php
$p = getcwd();
echo $p;
?>
 phpinfo.php
<? phpinfo(); ?>

31. Design Resources
 dribbble.com
 behance.net (Adobe’s creativity portal)
 builtwith.com (what technology is driving the site?)
 whatwpthemeisthat.com
 siteinspire.com

32. Design Resources
 rafaltomal.com
 reddit.com/r/css/
 github.com/stephenbstarr

33. Website Design Workflow
Questions? Comments?
steve@stephenbstarrdesign.com
stephenbstarrdesign.com
linkedin.com/in/stephenbstarr
instagram.com/stephenbstarr

34. Website Design Workflow
Go forth and be chill!