Working through basic web design principles with government employees in Port Vila, Vanuatu as part of my Peace Corps Response assignment.

1. Web Design
Fundamentals
Professional Development Workshop for OGCIO
Port Vila, Vanuatu

2. Brenna Mickey
Masters of Art in Interactive Media
Work experience
Web Design & Development Specialist, Vanuatu
Interactive & UX Designer, USA
University Adjunct Art Instructor, USA
Lead UI Designer, USA
Interactive Art Director, Cuba
Community Development Peace Corps Volunteer, Albania
Portfolio
BrennaMickey.com
Behance.com/brennamickey

3. Web Design
Web design isn’t something that just designers do.
Web design is a marketing tool.
Web design is how your product works,
acts and responds to the user.
Web design is the process of creating a website, launching
the website and maintaining the website.

4. Web design in this case is a category that holds many disciplines.
Jobs in web design could include:
User experience design, user experience strategy, user interface design,
user testing, interaction design, app design, front end development,
back end development, database development, content strategy,
graphic design, quality assurance, project manager, product owner,
software engineer...
Web Design

5. What is bad web design?
Bad web design confuses the user.
Bad web design doesn’t function on multiple devices.
Bad web design looks dated or isn’t updated.
Bad web design is based on assumptions
and personal preferences.

6. Why is this bad web design?

7. Why is this bad web design?
No visual hierarchy

8. Why is this bad web design?

9. Why is this bad web design?
←Right Navigation
←Hard to read
←Photo treatment

10. Why is this bad web design?

11. Why is this bad web design?
←Navigation is lost
←Random
white space
←Not designed on a grid
COMIC SANS

12. What is good web design?
Good web design has purpose.
Good web design clearly communicates.
Good web design has visual hierarchy.
Good web design is based off of research and usability.
Good web design is designed on a grid and made to
function no matter the device it’s viewed on.

13. Web Design Disciplines
User Experience (UX) User Interface (UI) Interaction Design
Front End Development Back End Development
Graphic Design Content Strategy Branding
User Strategy App Development User Design

14. Web Design Tools
Software that are considered tools of the trade for those in
the web design industry, some are free some are paid
Strategy: Invision, Omnigraffle, Axure, pen and paper
Disciplines: UX design, UX strategy, content strategy
Visual: Photoshop, Illustrator, Sketch, Invision
Disciplines: Graphic design, interactive design, UI design, app design, branding
Development: HTML5/CSS, Javascript, JQuery, JSON, XML, jQuery,
Node.js, Angular, Ember.js, Swift, C++
Disciplines: Front end development, back end development, app development

15. Responsive Web Design

16. Responsive Web Design
A necessary web design approach that allows the website
to function on various devices, despite the screen size,
providing an optimal viewing and user experience.

17. Responsive Web Design Grid System

18. Responsive Web Design Grid System

19. Responsive Web Design Grid System

20. Ministry of Youth and Sports Development Website
MoYSD.gov.vu will be used as a case
study through out this presentation,
displaying examples of strategy, design
and development.
-----
1. Strategy
2. Project Plan
3. Design
4. Development
5. Launch
6. Maintenance

21. Content strategy refers to the planning, development and
management of content. In the case of web design and app
design, this not only refers to copy, but photographs,
interactives, videos. Anything you see online, in order to be
effective, needs to be there with purpose.
This process happens during the discovery phase of web design.
Strategy

22. Strategy
Step 1: Card Sorting
Card sorting helps everyone brainstorm
every and all ideas about the website or
product being made. Once you have put
all ideas out there you can begin to
categorize them, get rid of ones that
don’t make since, and begin to organize
the information.
http://blog.invisionapp.com/slice-of-lime/

23. Strategy
Step 2: Site Map
Site maps are a list of pages on a website,
arranged by hierarchy and in categories. It is
usually used during the discovery phase of a
website to help get everyone on the same page
about what type of site is going to be built. It
lists the pages out, organized by level.

24. Site map for MoYSD website

25. Strategy
Step 3: Project Plan
A project plan gets everyone on the same
page about business requirements, user
requirements, implementation
requirements, timeline, site map, quality
assurance.
It’s a document that should be pretty
concrete, and set the scope of the overall
project, therefore projecting an accurate
representation of budget and timeline, as
well as what will be delivered at the end
of the project.
http://blog.invisionapp.com/improving-ux-with-pixars-storytelling-rules/

26. Part of the Project Plan for the MoYSD Website

27. User Experience (UX) refers to a person’s total experience
using a product or website.
Great UX is to meet the exact needs for the usage of
a product or service. Providing your client with wireframes and
prototypes helps them understand your vision.
If you want to make something, first you must know about who
will be using what you’re making.
Strategy

28. User Strategy refers to user testing, a/b testing, surveys, screen
heat maps, and any sort of research that is performed in order to
better fit the client’s need.
Who is the target audience? What is the main purpose of the
website? What information is the most important? Where do you
want the user to go? What’s the customer journey?
Strategy

29. Strategy
Step 4: Wireframes
Wireframes are known as the blueprint for the
website. They are created for the purpose of
arranging elements and content to best accomplish a
purpose. This is considered user experience (UX)
design and strategy. Wireframes can be hifi or lofi,
static or interactive, showing more of a user flow.
https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF/attachments/113431

30. Wireframes for the MoYSD Website
Brenna Mickey, Peace Corps Response

31. Strategy
Step 4: Prototyping
Prototyping helps give the client an idea of what the
journey will be through the website or app.
Prototypes can be hifi or lofi and are typically
interactive, displaying content, animations and
overall user flow.
You’re basically showing what the product will look
like at the end without actually building it yet.
https://dribbble.com/shots/2033702-Calendar-Weather-Widget

32. Interaction design creates thought out interactions inside of your
device, helping the user understand the website or app better. It
focuses on creating good communication through visual and
motion design between the user and technology.
Design

33. Prototyping Interactions
Smart phone dial
https://dribbble.com/shots/2280148-
Day-003-Animated-Dial-Pad
Button interaction
https://dribbble.com/shots/2298320-
Spin-loader-and-success-animation

34. Prototyping Interactions
Pull down (hold) - Refresh
https://dribbble.com/shots/1802075-
iPad-Location-Detail-Article
Scroll down (hold)
https://dribbble.com/shots/2590603-
Liquid-Pull-Down

35. Prototyping Interactions
Swipe right/left
https://dribbble.com/shots/2021508-
Weather-app-concept
Hold and drag
https://dribbble.com/shots/2258080-
Principle-Prototype-To-Do-Lists-and-
Tasks

36. Prototyping Interactions
Icon interactions
https://dribbble.com/shots/2428762-
Cut-Copy-Share-Delete
Form Interactions
https://dribbble.com/shots/2197140-
New-Material-Text-Fields

37. Bae yumi practis.
Let’s all work together to brainstorm a
website about __________.

38. Bae yumi practis.
What kind of information do you think should go on
the website about __________.
What categories of information are important? What do you think the user will
want to know when they come to your website? What is the main purpose of
the website? Who is the target audience?
Strategy: Card Sorting (Step 1)

39. Bea yumi practis.
Now let’s sort the information.
What is the most important? Can some information fall into
categories? What should have it’s own page? Should there be
action items?
Strategy: Site Map (Step 2)

40. Bea yumi practis.
Now let’s decide on a plan of action.
How long do you think it would take for development? What are
the user requirements that are needed? How many pages? What
type of devices should this website work on?
Strategy: Project Plan (Step 3)

41. Bea yumi practis.
Now let’s sketch out initial page layouts.
What information is important? Remember visual hierarchy, there
should be systems in place for pages on different levels. Should
we do mobile wireframes too?
Strategy: Wireframes (Step 4)

42. Now that we have the content strategy behind our website
completed, we can start to do the visual design.
What will the website look like? Are there brand guidelines to
follow? Colors, photography, button styles, visual aesthetic, etc.
Design

43. Design
Visual design of a website includes:
- Designing on a grid, using the wireframes as a guide
- Text Hierarchy: <h1>, <h2>, <h3>, <h4>, <p> tags
- Photo selection
- Button distinction, call out treatments
- Responsive design (mobile, tablet, desktop)
- Staying on brand
- Skinning the wireframes

44. Design
http://jesseddy.com/blog/2011/12/how-i-use-adobe-ideas/

45. User Interface Design (UI) refers to the design that aims to
predict what the user needs or wants while using the website. It
makes sure that the elements on the website are easy to access
and understand.
This is the visual design of the website or app.
Design

46. Visual hierarchy in the MoYSD website

47. Visual hierarchy in the MoYSD website
←Primary Page
Large header image, all photos
treated the same
←Secondary Page
Smaller header, all left text and
same photo from primary page it’s
underneath in site map

48. Responsive Grid System (Desktop) MoYSD Website

49. Responsive Grid System (Mobile) MoYSD Website
4 column grid on desktop, went to 1 column grid on mobile

50. Buttons
Jen Hubbard, Centerline Digital

51. Interactive Tools
Brenna Mickey, Centerline Digital

52. Game Design
Brenna Mickey, Centerline Digital

53. Game Design
Brenna Mickey, Centerline Digital

54. Development of the website is the coding aspect of
web design. This is the part of the website the user
cannot see. If the wireframes are a blueprint, and
the designs are a prototype, development is the
actual building of the house.
Development

55. Front End Development
Producing HTML/CSS and Javascript for a website or app so
that the user interacts with directly
Developmenthttps://wall.alphacoders.com/big.php?i=695931

56. Back End Development
Code that resides on the server (server side) that the user never
sees or interacts with
https://wall.alphacoders.com/big.php?i=695931 Development

57. Application development
The process in which an application software is developed for
devices. This could include games, social media apps, anything
you can purchase in the app store or already comes preloaded
on your phone.
Development

58. Content Management System (CMS)
A computer service that allows publishing, editing and modifying content
from a central interface. They provide an easy to use interface to manage
content once the website is handed over to the client.
Development

59. CMS - Joomla for MoYSD Website

60. CMS - Joomla for MoYSD Website

61. Common languages
Front end web development
- HTML5/CSS3
- Javascript
- JQuery
Back end web development
- Python
- PHP
- Action Script
- Perl
App development
- Swift (iOS)
- Java
- C++
Content Management Systems (CMS)
- Wordpress
- Joomla
- Drupal
- SquareSpace
Development

62. Quality Assurance (QA)
This process happens before launch of the website, checking
content, documentation, graphics, layout, browser compatibility
and user preference compatibility.
Development/Maintenance

63. CMS Training
Transferring knowledge to your client about how to update
content on the chosen CMS.
Feedback and Iterations
A website is never truly finished. It should be updated with
current information, feedback should be analyzed, Google
analytics should be broken down.
Development/Maintenance

64. Review
Basic Web Design Steps
1. Strategy
2. Project Plan
3. Design
4. Development
5. Launch
6. Maintenance

65. Questions?
BrennaMickey@gmail.com
Twitter.com/BrennaMickey