Embed Size (px)
Citation preview
WordPress Theme DevelopmentWORKFLOW
CLIENT REQUIREMENTS - (EXAMPLE)
• Client wants a site to showcase offered services, previous portfolio (works), and testimonials…
• Wants to publish blog posts…• Wants to have contact page with contact form / map…• Option to feature a few portfolio pieces on the front page…• Wants to maintain the site without the daily assistance of a web developer…
HOW DO YOU START?
WEB DESIGN IS A PROCESS
PREPARE
OPTIMIZE
PLAN BUILD OPTIMIZE LAUNCH
A website is never done.
It's a living and evolving entity and when it is launched, it's time to start over and revisit the first phase (plan).
Discovery Meeting
Gather all the information and requirements…The site purpose, message, functionality, content…What the site users should achieve on the site…
This meeting is to listen, not to propose ideas
PLAN
Discovery MeetingWHAT MATTERS TO WHOM?
PLAN
Site owner: Ability to communicate information to the end user.
Site users: Ability to find, consume, and understand information of their interest.
Discovery MeetingWHAT MATTERS MOST?
PLAN
Discovery MeetingTHE END USER
PLAN
We're building informational user experiences for
the user....
...even though the client is the one paying us.
Discovery MeetingTHE END USER
Looks for content and information…Doesn’t care about the platform…Doesn’t care about your opinions about their choice of browser…
PLAN
Discovery MeetingROLES
Remember... the client is part of the team. While the responsibility as the web designer is to build the solution, the client's responsibility is to provide vision, content, and input along the way.
PLAN
Discovery MeetingYour job as a web designer/developer is to create informational user experiences: Make it possible for the people to receive and understand what the site owner intends to communicate to them.
Note the lack of design and development at this point...
PLAN
Discovery Meeting
That’s because Content Strategy, Information Architecture and User Experience are what guide and define the design and development.
You need to sort these out before you can start the design and development process.
Content Strategy
Planning for the creation, delivery, and governance of useful, usable content.
DEFINITION
Content Strategy – for you
How to communicate the message in the clearest and most easily understood way.
DEFINITION
Information Architecture (IA)
The art and science of organizing and labeling web sites to support findability and usability.
DEFINITION
Information Architecture (IA) – for you
How to organize navigation, content and search to help people find what they are looking for.
DEFINITION
User Experience
The overall experience of a person using a product such as a website. Especially in terms of how easy or pleasing it is to use.
DEFINITION
User Experience – for you
How to make the design easy and entertaining to use.
DEFINITION
Informational Experience
How to ensure people find what they are looking for, understand it, and have a pleasant time doing so.
DEFINITION
Discovery MeetingUser centric design | Inclusive design
Content & Mobile FirstResponsive & Accessible
PLAN
Discovery MeetingWhat is the purpose of the site?What is the message of the site?Who is the audience of the site?
PLAN
Content Strategy
Establish rules about the substance and ownership of content.What is it, why does it matter, how, and when is it made, where is it published?
PLAN
Personas
Describe the people who are the target audience. Ideally base them on real people.Remember! The client is not the target audience and neither are you.
PLAN
Audit + Inventory
Collect, and document all existing and to-be-produced content.
Organize every single item…
PLAN
Content Modeling
Identify the types of content available: how they differ, how they relate, what attributes they have, how and where is best to present each type…
PLAN
Work Page
List of Web work— Image— Short description— Link to page
List of Photo works
— Image, link to page
About Page
About text
All the Testimonials (quote & author)
Contact Page
Contact text format and form
Sidebar
— Special Contact Page Widget with…
— Random Testimonial
— Link to Web works
— Link to Photo work
Services Page
List of Services with in page navigation
Sidebar
— Random Testimonial
— Link to Web works
— Link to Photo work
Architecture (IA)
Structure the content to enable understanding, usability, and findability.Create hierarchies, and intuitive structure.
PLAN
So you have a bunch of pages in your head? How do you want to organize them?
ASIDE
All in one - single page sites Trendy but not very effective with a lot of content. Hard to navigate on phone unless it is done right.Example: https://gocounterpoint.com/
ASIDE
Indexed Flat structure Typical for business brochure website but not very useful for large volumes of content.Example: https://www.interiorequities.com/
ASIDE
Strict Categorical Hierarchy Must click through each level to get to the next.Example: https://haidamarineplanning.com/
ASIDE
Multi Dimensional HierarchyMultiple ways to get to the same content.Examples: Any blog or large eCommerce website
ASIDE
Discovery MeetingWhich should you choose?
PLAN
Discovery MeetingTrack the path of your Personas
After you created personas for your different users, track their path through the site…
PLAN
Card Sorting
Create individual cards for each asset and have random people sort them according to their own understanding of order.
PLAN
Service list
About Contact
Testimonial list
Portfolio items
Blog posts
Compliments
Web works
Photo works
Finalize IA
PLAN
When you are satisfied, show it to the client:
Wireframe - schematic model of content + architecture
A wireframe is a structural illustration of features and functions.You need it for yourself to plan out every function and feature.It can be digital or on paper.
PLAN
Template Map
Create a template map (based on the WP template hierarchy) to match your architecture.Create a baseline for DRY development…
PLAN
What the client sees
PLAN
What we see…
PLAN
DESIGN
Create a design around the content… Smartphone Tablet Desktop Widescreen
BUILD
Content First
Present the content in pure HTML to match the architecture and hierarchy defined earlier.The content must make sense without CSS and any design elements…
BUILD
Underscores
Start with the _s theme (Underscores). It meets current WordPress and web standards and it is accessible.
BUILD
SETTING UP
1. Local environment (WAMP, MAMP, etc.)2. Fresh WordPress installation3. _s starter theme (or another starter theme of your choice)
BUILD
SETTING UP
1. Use an IDE or good code editor (VS Code, Sublime Text, Netbeans, PHPStorm, Brackets, Atom…)
2. Choose a target browser but test in all …3. Local + optional hosted version control …
BUILD
Version Control
BUILD
Use a version control system for code and design assets.
Version Control
BUILD
Cloud-based version control options for collaboration:
Accessibility
Ensure content, navigation, and meta information is accessible.
BUILD
The Accessibility Project Patternshttp://a11yproject.com/patterns/
WordPress Accessibility Guidelineshttps://make.wordpress.org/themes/guidelines/guidelines-accessibility/
Lynda.com – Accessibility for WordPresshttp://www.lynda.com/course-tutorials/Accessibility-WordPress/374185-2.html
Design in the Browser
Design with real content, starting with the smallest screen and moving up.Set breakpoints based on content, rather than defined device widths.
BUILD
Style, Code, and Process Guides
Establish guides for design, code, and process.Coding Example: http://codeguide.co/Other readings: https://docs.mobify.com/http://pointnorth.io/ https://developers.google.com/web/fundamentals/
BUILD
SEO + Sharing
Based on the client requirements have SEO & Social Media Sharing on the site.SEO by Yoast - https://wordpress.org/plugins/wordpress-seo/
AddThis - http://www.addthis.com/
SNAP - http://wordpress.org/plugins/social-networks-auto-poster-facebook-twitter-g/
HootSuite - https://hootsuite.com/
OPTIMIZE
Levels of being social
FollowShareAutomate posting to social platforms
SEO + Sharing
WordPress Plugins: Social Media Buttons tutorialhttp://www.lynda.com/sdk/WordPress-tutorials/WordPress-Plugins-Social-Media-Buttons/169878-2.html
WordPress Plugins: SEOhttp://www.lynda.com/sdk/WordPress-tutorials/WordPress-Plugins-SEO/140779-2.html
OPTIMIZE
Minify everything
Minify your HTML, CSS, and JavaScript resources.
https://developers.google.com/speed/docs/insights/MinifyResources
OPTIMIZE
PREPARE
Version ControlStyle, Code, and Process Guides
OPTIMIZE
PLAN BUILD OPTIMIZE LAUNCH
PersonasAudit + InventoryContent StrategyContent ModelingIACard SortingTemplate MapWireframesUser Testing
Content FirstAccessibilityGuidesDesignBrowser Design
Web StandardsAccessibilitySEO + SharingMinimizeCaching
Soft LaunchTutoringHard LaunchGrace PeriodIterateRevisions
Final Steps with the Client
Final Steps with the Client
Backup solution (a plugin and/or hosting provider backups)
Customize the login page (use a plugin or code in your theme)
Clean up the site (empty trash, delete unused themes/plugins,etc.)
Add a Screenshot to the Theme
Roles / Access
Give the client an “everyday use” account with restricted access to WordPress and an administrator account with full access.Plugins: Adminimize / User Role Editor / Advanced Access Manager… and many others
EXTRA
Tutoring
Create a website guide for the client (in the WordPress dashboard or as a PDF…).
Potentially provide them short video tutorials if you developed something very customized (there is free screen casting software such as Screen-Cast—O-Matic).
EXTRA
Measure
JetPack Statistics - http://wordpress.org/plugins/jetpack/
Google Analytics account & Google Analyticator plugin https://wordpress.org/plugins/google-analyticator/
Lynda.com:
http://www.lynda.com/sdk/WordPress-tutorials/WordPress-Plugins-Analytics/163114-2.html
http://www.lynda.com/Google-Analytics-tutorials/Google-Analytics-Essential-Training/197523-2.html
EXTRA
Us...
I can’t fix this …
Questions Life …
Questions Career …
Oh it was a typo, cool …
Crisis of confidence …
CREATIVE / DEVELOPMENT PROCESS
This is awesome…This is tricky…This is sh*t…I am sh*t…This might be ok…This is awesome…
LEARNING CURVE - MOOD
