WordPress | premiuminteractive.com Principle of Premium Interactive Designer / Front-end Developer Organizer of Hollywood WordPress Meetup Designing for the web since 1999 @premiuminteract
premiuminteractive.com If you are designing and building commercial websites for clients you are already making decisions about user experience design even though you may not be consciously aware of it. UX is something anyone can do… The purpose of this talk is to narrow the focus of UX in general to offer some tools to those who own small WordPress design businesses that want to improve their website planning and designing phase.
| premiuminteractive.com (UX = User Experience Design) UXD shapes how you feel while interacting with something. It is shaped by the look, language and feedback of a system across platforms. User experience encompasses all aspects of the user’s interaction with the company, it’s services, and it’s products. UXD is designing the user interaction; taking into account who will be using the site, how they will engage the website and the primary action we want them to perform .
Douglas | UX For WordPress | premiuminteractive.com In agencies typically the UXD is a role held by one person or a team of people. The UX designer(s) take into consideration what the UI and the programmers will do to build the site and they create their site maps, wireframes, and user flow with the intention of handing it off to the UI designer(s) and programmers. In a small agency of one or two people the UX role is often times played by the same person that is doing the UI and the coding of the website.
Sketching gets a lot of ideas out of your head and onto paper quickly. It helps shape good ideas and eliminate bad ones. You can iterate on sketches very quickly. The investment is low for the return. Cool Apps for sketching include: Paper by FiftyThree Sketchbook Express, Sketchbook Pro Interactive Sketchbook
Blueprint that specifies how something is built Designers use them to develop the user interface Developers use them to understand the functionality of the project Programs For Wireframing include: Omnigraffle Balsamiq Illustrator (Also InDesign, Fireworks and Photoshop)
premiuminteractive.com Deck: Deliverable that the UX designer builds – Sitemap/Application map – Process/User Flows • Put sitemap in the order that the user will experience the site. This will include signups, decision points and other interactive steps • Legend – Common Components • Title of page/numbered location of where you are in the site • Annotation • Logo • Buttons • Links • Header/footer • Navigation • Highlighted steps • Order summery • Showing different states – Error – Login/logout – Multiple login states – Authorization level
Prepare functional models displaying your intended interaction A clickable wireframe communicating to the client precisely how the user will engage with and experience the interaction. Programs For Prototyping include: WordPress installed and interaction built (but no design applied) Mockup Builder Axure
For WordPress | premiuminteractive.com If you have already been designing with WordPress and have installed a theme then it is likely that your first experience with UX was the UX designed for you by the theme developer. But what if the client wants to do specific things in their website design that are not included in the prebuilt theme? UX For A Small Budget and Pre-Built Theme UX For Larger Budget Websites and Applications
For WordPress | premiuminteractive.com Select a theme with a native structure that is close to the goal you want to achieve and then plan your wireframes and UI comps around that theme and tailor each to the needs established by your client Create sketches and wireframes for your client for the homepage and one sub page and the rest of the website then flows into the sub page design
For WordPress | premiuminteractive.com Identify Early What Sections or Features Will Need An Unique User Experience Design Main Sections / .PHP Template Pages Unique Sub Page Design Portfolio, Team/Faculty Page, Blog BuddyPress Profile, Forum Pages Ecommerce Customized Product Pages, Custom Check Out
breath and only focus on the step right in front of you. When timelines are tight and budgets are small there is a tendency to want to rush the project and cut steps out. Taking a little extra time can give you clarity, save you additional rework later and has a better chance of encouraging the interaction you originally intended. Most likely the UX you use will differ project-by-project and it will rely on an amalgamation of knowledge, experience, research, and intuition.
gregdouglas
ashapiro
okakasoysauce
usagimaru
amishiratori
olgastoryboard
chiemitaki
0opacity_
thebogheart
ncdc
abokadotyann
maggiecrowley
lara
kneath
bryan
addyosmani
stephaniewalter
chriscoyier
garrettdimon
matthewcrist
jeffersonlam
philhawksworth
![Thank You Greg Douglas greg [at] premiuminteractive.com @premiuminteract](https://files.speakerdeck.com/presentations/a75a83b0ccbd0130ff764e0ed8f4b592/slide_24.jpg){kind=link}