Fundamentals of Web Design - Professional Development Workshop

Web Design Fundamentals

Professional Development Workshop for OGCIOPort Vila, Vanuatu

Brenna MickeyMasters of Art in Interactive Media

Work experienceWeb Design & Development Specialist, VanuatuInteractive & UX Designer, USAUniversity Adjunct Art Instructor, USALead UI Designer, USAInteractive Art Director, CubaCommunity Development Peace Corps Volunteer, Albania

PortfolioBrennaMickey.comBehance.com/brennamickey

Web DesignWeb 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.

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

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.

Why is this bad web design?


No visual hierarchy



←Right Navigation

←Hard to read

←Photo treatment



←Navigation is lost

←Random white space

←Not designed on a grid

COMIC SANS

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.

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

Web Design ToolsSoftware 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 paperDisciplines: UX design, UX strategy, content strategy

Visual: Photoshop, Illustrator, Sketch, InvisionDisciplines: 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

Responsive Web Design

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

Responsive Web Design Grid System



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. Strategy2. Project Plan3. Design4. Development5. Launch6. Maintenance

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

StrategyStep 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/

StrategyStep 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.

Site map for MoYSD website

StrategyStep 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/

Part of the Project Plan for the MoYSD Website

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

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

StrategyStep 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

Wireframes for the MoYSD Website

Brenna Mickey, Peace Corps Response

StrategyStep 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

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

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


Pull down (hold) - Refresh

https://dribbble.com/shots/1802075-iPad-Location-Detail-Article

Scroll down (hold)

https://dribbble.com/shots/2590603-Liquid-Pull-Down


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


Icon interactions

https://dribbble.com/shots/2428762-Cut-Copy-Share-Delete

Form Interactions

https://dribbble.com/shots/2197140-New-Material-Text-Fields

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

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)

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)

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)

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)

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

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

Design

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

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

Visual hierarchy in the MoYSD website

Visual hierarchy in the MoYSD website

←Primary PageLarge header image, all photos treated the same

←Secondary PageSmaller header, all left text and same photo from primary page it’s underneath in site map

Responsive Grid System (Desktop) MoYSD Website

Responsive Grid System (Mobile) MoYSD Website

4 column grid on desktop, went to 1 column grid on mobile

ButtonsJen Hubbard, Centerline Digital

Interactive Tools

Brenna Mickey, Centerline Digital

Game Design


Game Design


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

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

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

Application developmentThe 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

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

CMS - Joomla for MoYSD Website

CMS - Joomla for MoYSD Website

Common languagesFront 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

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

Development/Maintenance

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

Review

Basic Web Design Steps

1. Strategy2. Project Plan3. Design4. Development5. Launch6. Maintenance

[email protected]/BrennaMickey

mailto:[email protected]

mailto:[email protected]