Slides from my talk at Cambridge Usability Group on the 12th of May 2014
http://www.eventbrite.co.uk/e/designing-better-ux-deliverables-tickets-11542298325
Needing to produce some kind of deliverables throughout a project is inevitable: it might be user research reports to inform senior stakeholder; usability test results to communicate to developers; sketches and wireframes to pass on to web designers.
Just as we make the products and services we design easy to use, the UX of UX is about communicating your thinking in a way that ensures that what you've defined is easy to understand for the reader. It's about adapting the work you do to the project in question and finding the right balance of making people want to look through your work whilst not spending unnecessary time on making it pretty.
Slides from my talk at Cambridge Usability Group on the 12th of May 2014
http://www.eventbrite.co.uk/e/designing-better-ux-deliverables-tickets-11542298325
Needing to produce some kind of deliverables throughout a project is inevitable: it might be user research reports to inform senior stakeholder; usability test results to communicate to developers; sketches and wireframes to pass on to web designers.
Just as we make the products and services we design easy to use, the UX of UX is about communicating your thinking in a way that ensures that what you've defined is easy to understand for the reader. It's about adapting the work you do to the project in question and finding the right balance of making people want to look through your work whilst not spending unnecessary time on making it pretty.
Our friends at UXPin are giving Awwwards users this fantastic e-book for free, explaining the 10 most successful web design techniques. Check out the analysis of 166 examples with tons of tips and resources!
Putting the "User" back in User Experience (Dallas Techfest Edition)Jeremy Johnson
If you ask an organization "Are you customer centric?" - of course they say "yes", but as you peel back the layers too many organizations have teams of people building software - and the user is nowhere in sight. This talk will go over a number of ways to include users in your product design process, from start to finish. It's time we truly live up to the term "User Experience".
There are key things that will give you a much better chance at success. While these are well documented in numerous books, articles, and videos - there are still many stakeholders that don't subscribe to some basic truths, like: product decisions should be based on evidence, or having dedicated UX Designers on product teams.
Jeremy will go over his top ten questions to ask any team to see if they're heading toward launching a great product experience.
This presentation was originally given @ Refresh Dallas on 2/12/15
As a UX Practitioner, this is my portfolio and personal presentation deck.
Examples of my deliverables, wireframes, process flows, personas, usability analysis, and overall value proposition of what I can bring to the table.
I bring the value add of 30 years in business, actual Business Analyst and Project Management experience for major brands and companies like AT&T Mobility, Verizon, Verizon FiOS TV, GameStop, Hewlett-Packard, Wal-Mart, United Health Group, Microsoft, Copart, DAI, Eli Lilly, Verizon, First Choice Power, Nissan, Jackson Hewitt, Pep Boys, Miami Dolphins, Friendly’s Ice Cream, PepsiCo, Denny’s, BMW, Terminix, Sauza, Frito-Lay, Proctor & Gamble, Sabre, Worldspan, De Beers, Nestle, IBM and FEMA’s National Flood Insurance Program.
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
A quick & dirty intro to UX strategy & design. Some context, some fundamentals, some current & emerging trends, and some useful resources for the absolute beginner.
First delivered @ the NDRC Launchpad startup accelerator in Dublin, Ireland, 16/10/2014. (www.ndrc.ie)
These slides are from a 2 hour presentation called Design for Developers.
The goal of Design for Developers is to teach interface design as a set of rules: there are some good default values for a lot of design decisions that you should remember, there is a “scientific” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”.
Nick will explore the best practices of user experience by reviewing some of the most popular and highly trafficked websites today such as eBay, Amazon, Toyota, Flickr, Twitter, Netflix and more. Nick will identify and explain both good an bad experiences on these sites on the merits of visual design, information architecture, interaction, and ease of use. If there is time we will open the floor for audience submissions and to provide quick feedback and areas of improvement.
The Whole is Greater than the Sum of its Parts - The art of war.
In the same way that a good written document (like a report, or newspaper article) should be arranged in a certain way to make it more accessible to readers, it’s a good idea to structure your webpages so they are easy for Google and the other search engines to crawl and understand.
This guide covers top-line and technical details around modern content structure and UX as is affects search optimization.
Please feel free to share.
Putting the "User" back in User ExperienceJeremy Johnson
If you ask a organization "Are you customer centric?" - of course they say "yes", but as you peel back the layers too many organizations have teams of people building products - and the user is nowhere in sight. This talk will go over a number of ways to include users in your product design process, from start to finish. It's time we truly live up to the term "User Experience".
This workshop presents an accessible framework for understanding sketching to help communication, understanding, and problem solving -- particularly during a design process that includes multiple roles (that don't always speak the same language).
I propose, not only that sketching helps bridge gaps in communication and get to a deeper level of understanding, but also that every kind of sketching activity falls into one of three categories; thinking, talking, and showing.
In this workshop, for each type of sketching we cover:
- Who it helps
- What it is
- When it can help
- Why you don't need to "know how to draw" to use it
- How to be prepared to use it
You don’t even need to know how to “draw” to learn and apply the methods covered here. After attending this session you will be more comfortable with and better prepared to recognize opportunities where sketching can be used to increase communication and understanding with clients, stakeholders, coworkers, as well as all by yourself, as you work through problems and come up with solutions.
Steve Portigal - "Well, we did all this research ... now what?"BayCHI
User research often catalogs findings and implications, but stops short of generating specific design improvements. Designers increasingly involved with contextual research may find themselves holding onto a trove of raw data but with little awareness of how to turn it into design. Steve Portigal introduces a framework for synthesizing raw data into a fresh, contextual understanding of a customer's unmet needs.
Our friends at UXPin are giving Awwwards users this fantastic e-book for free, explaining the 10 most successful web design techniques. Check out the analysis of 166 examples with tons of tips and resources!
Putting the "User" back in User Experience (Dallas Techfest Edition)Jeremy Johnson
If you ask an organization "Are you customer centric?" - of course they say "yes", but as you peel back the layers too many organizations have teams of people building software - and the user is nowhere in sight. This talk will go over a number of ways to include users in your product design process, from start to finish. It's time we truly live up to the term "User Experience".
There are key things that will give you a much better chance at success. While these are well documented in numerous books, articles, and videos - there are still many stakeholders that don't subscribe to some basic truths, like: product decisions should be based on evidence, or having dedicated UX Designers on product teams.
Jeremy will go over his top ten questions to ask any team to see if they're heading toward launching a great product experience.
This presentation was originally given @ Refresh Dallas on 2/12/15
As a UX Practitioner, this is my portfolio and personal presentation deck.
Examples of my deliverables, wireframes, process flows, personas, usability analysis, and overall value proposition of what I can bring to the table.
I bring the value add of 30 years in business, actual Business Analyst and Project Management experience for major brands and companies like AT&T Mobility, Verizon, Verizon FiOS TV, GameStop, Hewlett-Packard, Wal-Mart, United Health Group, Microsoft, Copart, DAI, Eli Lilly, Verizon, First Choice Power, Nissan, Jackson Hewitt, Pep Boys, Miami Dolphins, Friendly’s Ice Cream, PepsiCo, Denny’s, BMW, Terminix, Sauza, Frito-Lay, Proctor & Gamble, Sabre, Worldspan, De Beers, Nestle, IBM and FEMA’s National Flood Insurance Program.
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
A quick & dirty intro to UX strategy & design. Some context, some fundamentals, some current & emerging trends, and some useful resources for the absolute beginner.
First delivered @ the NDRC Launchpad startup accelerator in Dublin, Ireland, 16/10/2014. (www.ndrc.ie)
These slides are from a 2 hour presentation called Design for Developers.
The goal of Design for Developers is to teach interface design as a set of rules: there are some good default values for a lot of design decisions that you should remember, there is a “scientific” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”.
Nick will explore the best practices of user experience by reviewing some of the most popular and highly trafficked websites today such as eBay, Amazon, Toyota, Flickr, Twitter, Netflix and more. Nick will identify and explain both good an bad experiences on these sites on the merits of visual design, information architecture, interaction, and ease of use. If there is time we will open the floor for audience submissions and to provide quick feedback and areas of improvement.
The Whole is Greater than the Sum of its Parts - The art of war.
In the same way that a good written document (like a report, or newspaper article) should be arranged in a certain way to make it more accessible to readers, it’s a good idea to structure your webpages so they are easy for Google and the other search engines to crawl and understand.
This guide covers top-line and technical details around modern content structure and UX as is affects search optimization.
Please feel free to share.
Putting the "User" back in User ExperienceJeremy Johnson
If you ask a organization "Are you customer centric?" - of course they say "yes", but as you peel back the layers too many organizations have teams of people building products - and the user is nowhere in sight. This talk will go over a number of ways to include users in your product design process, from start to finish. It's time we truly live up to the term "User Experience".
This workshop presents an accessible framework for understanding sketching to help communication, understanding, and problem solving -- particularly during a design process that includes multiple roles (that don't always speak the same language).
I propose, not only that sketching helps bridge gaps in communication and get to a deeper level of understanding, but also that every kind of sketching activity falls into one of three categories; thinking, talking, and showing.
In this workshop, for each type of sketching we cover:
- Who it helps
- What it is
- When it can help
- Why you don't need to "know how to draw" to use it
- How to be prepared to use it
You don’t even need to know how to “draw” to learn and apply the methods covered here. After attending this session you will be more comfortable with and better prepared to recognize opportunities where sketching can be used to increase communication and understanding with clients, stakeholders, coworkers, as well as all by yourself, as you work through problems and come up with solutions.
Steve Portigal - "Well, we did all this research ... now what?"BayCHI
User research often catalogs findings and implications, but stops short of generating specific design improvements. Designers increasingly involved with contextual research may find themselves holding onto a trove of raw data but with little awareness of how to turn it into design. Steve Portigal introduces a framework for synthesizing raw data into a fresh, contextual understanding of a customer's unmet needs.
Presented at Design Thinking Meetup (Warsaw). Ideation process in service design - is a moment when we diverge and converge. What techniques to use in ideations? What are tools and how should you prepare facilitation. Methods of great ideation workshop. Inspired by life, cases, Socjomania workshops and Design Thinkers Academy certificate.
This presentation is targeted to developers trying to learn enough design skills to fill in gaps when a ux designer is not available to work on a project. A secondary goal is to give developers insight into the design process.
Design your Modern Intranet using SharePoint PnP Design Assets D'arce Hess
Presentation given at SharePoint Saturday Ottawa. Presentation go over basic design concepts and how to apply them to new designs and concepts in SharePoint
Design Thinking Dallas by Chris BernardChris Bernard
These are the slides I gave for a keynote at a conference hosting by IMC2 for the Design Thinking Dallas Conference. Some of the content here is repetitive across other presentations I give.
Questions? Email me at chris.bernard@microsoft.com
"A scenario is a description of a person’s interaction with a system.
Scenarios help focus design efforts on the user’s requirements, which are distinct from technical or business requirements.
Scenarios may be related to ‘use cases’, which describe interactions at a technical level. Unlike use cases, however, scenarios can be understood by people who do not have any technical background. They are therefore suitable for use during participatory design activities." http://infodesign.com.au/usabilityresources/scenarios/
A high level broad stroke intro to User eXperience, starting with a survey, a dash of my own thoughts, some thoughts from Mike Rapp, and some samples and resources. Also some slides from a presentation I did for Great American Teach in in 2014 to 3rd and 5th graders.
This is the slidedeck I used for my talk about UX for the 2016 cohort of Venture for Canada at Queen's University, Kingston, ON. In it, I go over what I've learned about UX over the past 3 years, including a brief history of UX, a look at the design landscape today, and a glimpse into what we can expect in the future. I followed this talk up with a quick hands-on workshop on UX design.
If you feel like this is something your organization or team can benefit from, feel free to reach out to me to coordinate something!
SPC Adriatics 2016 - Creating a Great User Experience in SharePointMarc D Anderson
Building solutions in SharePoint isn’t simply about getting the functionality right based on the business requirements. Developers must think about the entire user experience (UX), which goes far beyond the technical aspects of the solution. It’s no longer good enough to meet the specifications. We must exceed them in terms of usability. This takes many developers out of their comfort zones and into the messy world of end users.In this interactive session, we’ll discuss questions like:
How should the user feel when they use this piece of functionality?
Will they perceive that this functionality saves them work or creates new work?
How will the functionality compare to what they see on the consumer Web?
How can we use technologies which haven’t historically been considered mainstream SharePoint developer tools (like jQuery and CSS) to make SharePoint feel more like the sites people love?
We’ll look at good and bad examples from SharePoint itself as well as specific customizations.
An intro to what people (and myself) think UX is. Also who is "doing" UX and how you can do it better. Originally presented at Product Camp Nashville - Sep 2018
Presentation for graphic design students showing various creative careers in the web business. This acts as an intro for them to explore career choices in designing for the web. Presentation given at Suffolk university on Sept 25, 2009
What the UX? – Confessions of a DesignerThomas Gläser
UX - two magic letters which seem to attract a lot of hopes and desires. People hiring UX Researcher, UX Prototyper, UX Designer, UX Manager and UX Developer. People buy books about Agile UX and Lean UX. UX is everywhere, but what‘s really behind that thingy? This talk is for those who want to know more about the practical side of User Experience Design and also those who already know about it but have problems integrating it in to their everyday work. This talk will cut the hocus pocus and replace it with down to earth examples. So what? What the UX?
Session at Mobile Tech Conference 2015 in Munich:
https://mobiletechcon.de/2015se/sessions/what-ux-confessions-designer
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
Decormart Studio is widely recognized as one of the best interior designers in Bangalore, known for their exceptional design expertise and ability to create stunning, functional spaces. With a strong focus on client preferences and timely project delivery, Decormart Studio has built a solid reputation for their innovative and personalized approach to interior design.
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page pmgdscunsri
Figma is a cloud-based design tool widely used by designers for prototyping, UI/UX design, and real-time collaboration. With features such as precision pen tools, grid system, and reusable components, Figma makes it easy for teams to work together on design projects. Its flexibility and accessibility make Figma a top choice in the digital age.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
2. Creative Methods:
“Nearly any person can learn to improve his or her
creative abilities. Talent may be a mysterious
entity, yet the creative process tends to follow
predictable pathways.
By breaking down this process into steps, and im-
plementing conscious methods of thinking and doing,
designers can open their minds to vibrant solutions
that satisfy clients, users, and themselves.”
Ellen Lupton, Graphic Design Thinking
2
3. Step-by-step web design approach
provides professional framework for
start-ups, freelacers and web design
teams.
I would like to provide a little toolbox:
industry process for responsive web
design
quotes & tips from experienced designers
exercises to enhance creativity
inspiration & resources
UX theory & testing strategies
This Show
3
4. Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Personas
Visualization
Moodboard
Simple Wireframes
Breakpoint Graphs
Mock-ups
Prototypes/UX Design
Front-End Design
Theme Development
Design
Process
4
5. Finding Ideas
“Design is a messy endeavor. Designers
generate countless ideas that don’t get used.
They often find themselves starting over, going
backward, and making mistakes.
Successful designers learn to embrace this
back-and-forth, knowing that the first idea is
rarely the last and that the problem itself can
change as the project evolves.”
Ellen Lupton, Graphic Design Thinking
5
6. Defining the
design
problem:
RESEARCH
Brainstorming, interviews,
focus groups, visual
research, brand matrix
“We get it, we know exactly
where we stand in the
marketplace.” Radioshack
“The concept was the most
appealing thing about it.”
Frank Todaro, Moxie
Pictures
“The agency had fun.”
GSD&M
"The Phone Call" [Clip]
Agency: GSD&M, Austin, TX
6
>
7. “Yes, to powerful images.
Yes, to meaningful content.
Yes, to sleek and purposeful navigation."
"They [the designers] will also be able to use
pragmatism and remove your own personal bias
and emotion."
http://www.forbes.com/sites/thesba/2014/02/10/
top-web-design-trends-in-2014/
Client
Perspective
Web Design
Trends
7
8. Some ideas: Web Design Trends 2014
Grid-based design
Caption Mania with HTML5
http://tympanus.net/codrops/2013/05/02/automatic-
figure-numbering-with-css-counters
Sophisticated forms with jQuery
Landing Pages are back!
Play with Video
http://www.hongkiat.com/blog/html5-videos-things-
you-need-to-know/
Flat Design
Personal Portraits
More @font-face
Experiments with HTML5 Canvas and JavaScript
http://codepen.io/popular/
8
<figure>
<img src="path/to/your/
image.jpg" alt="" />
<figcaption>Here is the legend
for your image<figcaption>
</figure>
Source: http://
www.hongkiat.com/
blog/web-design-
trends-2014/
10. Defining the design problem:
research
brainstorming
interviews
focus groups
visual research
brand matrix
Conceptual
Phase
10
11. EXERCISE
Brainstorming
Throw away the scissors in your head
write down any idea on a pice of paper
don't take the first idea
second round with one favorite idea from first round
Business Goals help reach consensus
Collaborate with your client:
How does the brand look like?
What content will be needed?
How often will the website need updates?
11
12. “I want new visitors to be able to move down from the top of
the page to the bottom in 30 seconds and have a crystal
clear idea of who we are and what we do.”
“And for repeat visitors, I want them to easily identify where
to go to make a purchase, or visit our blog, virtually without
having to look.”
Forbes: http://www.forbes.com/sites/thesba/2014/02/10/top-
web-design-trends-in-2014/
Client
Perspective
UX Design
12
15. Design for Possibility:
“What makes WordPress so great as a CMS is its
ability to expand and evolve.
The default installation is tremendous, but as you
begin to work with it you’ll quickly realize that your
client’s unique needs require some additions […]
Widgets let you easily add content and features into
designated areas of your WordPress site.”
Jeff Golinski in Web Designer’s Guide to WordPress
by Jesse Friedman
See also:
http://wordpress.org/plugins/browse/popular/
15
18. User Representatives
Watch typical environments, shadowing,
open-ended questions, surveys, focus groups
(perceptions, beliefs, language, attitutes)
User Scenario:
Who? What needs? How needs are met.
Draw stick figures.
Designing for user needs, not wants.
18
Source: http://xkcd.com/1254/ “Preferred Chat System”
19. Competitors:
Similar brands market analysis:
What works?
What doesn’t?
What’s unique?
What’s the same?
Draw a Brand Matrix
Define opposites
Tea example:
East/West, Informal/Formal
Ellen Lupton, Graphic Design Thinking
19
Formal
Informal
EastWest
20. What Types of Content?
Location-based
Entertainment
Communication
Learning
Shopping
Gamification: use with caution
Apps: from telling to helping
20
21. “Once I have a good
understanding of the site
structure, I’ll move
to wireframing, then later
to the design.”
Jesse Friedman, author of “Web
Designer’s Guide to WordPress”
Create a sitemap
https://www.gliffy.com/
21
22. Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Personas
Visualization
Moodboard
Simple Wireframes
Breakpoint Graphs
Mock-ups
Prototypes/UX Design
Front-End Design
Theme Development
Design
Process
22
23. Ideas are safer on paper:
element inventory
moodboard
quick wireframes
breakpoint graphs
mock-ups
Visualization
23
24. Visualize early to avoid miscommunication:
Get ideas out of your head, onto the paper.
EXERCISE
Draw in a sketchbook
At the beginning of a project, acclaimed
designer Stefan Sagmeister creates
notes and sketches in short “concept time”
sessions. The designers also keeps a
sketchbook with him at all times, to be able
to sketch during meetings, at the airport
or while taking a cab ride through
New York City.
24
25. UX Design/Usability
What does a link look like?
if when lore ipsum
Mental Models
Home, About, Contact vs. lore ipsum
Lines, bold/italic, color, shapes, order, roll-over
25
27. "That’s where the design comes in, finding
a pro who knows what will work best on a
smartphone, tablet, or desktop-size screen,
and including the elements that make for
the most seamless and enjoyable format."
http://www.forbes.com/sites/thesba/2014/02/10/top-web-
design-trends-in-2014/
Client
Perspective
Responsive
Web
27
28. Breakpoint Graph for Responsive Web Design
(Responsive Design Workflow, p.101)
Ethan Marcotte, Responsive Web Design, p.114
28
29. “So what does it take to create a
responsive design?
Speaking purely in terms of front-end layout, it takes
three core ingredients:
1. A flexible, grid-based layout
2. Flexible images and media (% instead of px)
3. Media queries (CSS3)”
Ethan Marcotte, Responsive Web Design
29
<!-‐-‐
CSS
media
query
-‐-‐>
<style>
@media
(max-‐width:
600px)
{
.facet_sidebar
{
display:
none;
}
}
</style>
30. Visualize early to avoid miscommunication:
Simple wireframes save time & money
EXERCISE
Simple Wireframes
Use the marketing research to determine
what will be on screen, and when,
in which viewport.
30
header/logo
nav
content
footer
35. EXERCISE
Moodboard
1. Pick three colors (two harmonious, one complimentary)
2. Pick two fonts (one serif, one sans-serif)
http://www.fontsquirrel.com/
3. What textures fit your content?
http://subtlepatterns.com/
4. What images could draw the user’s attention?
http://photography.tutsplus.com/articles/15-stock-photography-
sites-to-sell-your-photos-for-beginners-and-pros--photo-1189
5. Make a moodboard out of all of the above
http://styletil.es/
http://balsamiq.com/
35
47. Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Personas
Visualization
Moodboard
Simple Wireframes
Breakpoint Graphs
Mock-ups
Prototypes/UX Design
Front-End Design
Theme Development
Design
Process
47
48. UX Design/Usability
Can I click that?
“What we design for… Read. Read. Read. Pause for
Reflection. Finally, click on a carefully chosen link.”
“The reality… Look around feverishly for anything that
a) is interesting, or vaguely resembles what you’re looking for
and
b) is clickable. As soon as you find a half-way decent match,
click. If it doesn’t pan out, click the Back button and try again.”
Steve Krug. Don’t Make Me Think.
48
49. Mobile First:
“If you design mobile first, you create
agreement on what matters most. You can then
apply the same rationale to the desktop/laptop
version of the web site.
We agreed that this way was the most
important set of features and content for our
customers and business–why should that
change with more screen space?”
Luke Wroblewski, Responsive Design
49
50. Sketches are affordable
“It’s very hard to push things or make
discoveries when you have to be good.
The act of making discoveries comes
from the freedom to fail.”
Paula Scher, Pentagram, in Design Diaries
50
54. PUBLISHING
Anticipate the admin-user:
For WordPress: “[…]take into consideration that
the client can move elements around.
When you design mock-ups, style common elements
in each widget areas to give some design control over
what will be placed there.
And if the site is responsive, anticipate how
those widgets will appear and function on different
devices.”
Jeff Golenski in Web Designer’s Guide to WordPress by
Jesse Friedman
54
55. DISCUSSION
Use a grid, create a mock-up in Photoshop, no?
http://www.thegridsystem.org/
http://photoshopetiquette.com/
http://www.creativebloq.com/web-design/photoshop-web-design-tips-111140
http://www.smashingmagazine.com/2013/04/22/repurposing-photoshop/
http://www.adobe.com/inspire/2013/11/photoshop-reflow-generator.html
https://gra617.expressions.syr.edu/wp-content/
uploads/2012/07/Photoshop-Optimizing-Images.pdf
55
56. Use WordPress Themes
http://wordpress.org/themes/
https://wordpress.org/themes/responsive/stats/
DISCUSSION:
“Code gives breath to ideas. Knowing how to
code is crucial! Knowing how to code well is
completely unnecessary.”
Pete Denman, designer, Intel Labs
(Interactive Design, P. 164)
http://www.smashingmagazine.com/2013/03/13/
guide-wordpress-theme-options/
https://yoast.com/wordpress-theme-anatomy
http://www.smashingmagazine.com/2013/02/21/
wp-theme-development-process/
Choosing an approach chart
Are your fancy ideas browser compatible?
http://caniuse.com/
56
58. 58
Choosing An Approach:
Approach Time Cost Capability
Future-
proofing
Repetition
Build from
scratch
high low high low low
Hack existing
theme
low low medium low low
Use theme
customizer
low low low low low
Create child
theme based on
existing theme
medium low medium high high
Create parent
theme
high low high high high
Theme
framework
(free)
medium low medium high high
Theme
framework
(premium)
medium high low to medium high high
http://www.smashingmagazine.com/2013/03/13/guide-wordpress-
theme-options/
59. UX Design/Usability Testing
“It’s not productive to ask questions like “Do most
people like pulldown menus?”
The right kind of question to ask is “Does this pulldown,
with these items and this wording in this context on this
page create a good user experience for most people
Steve Krug. Don’t Make Me Think.
59
60. EXERCISE
User Response tests, four areas:
1.Efficiency (steps & time)
2. Accuracy (mistakes)
3. Recall of Functionality & Content
4. Emotional Response
OR Heuristic Analysis
Software for testing: Silverback
Andy Pratt et.al., Interactive Design
60
61. “If your customers don’t know about what
you’ve designed, if they don’t realize how it can
help them, and if they don’t connect to it
emotionally, they will not visit your site…”
Steve Krug. Don’t Make Me Think.
Advertise for your website
Print media, ads, mailers, flyers,
radio, tv, other websites, email,
peer recommendation
61
Brand Loyalty
62. Works Cited:
Friedman, Jesse. Web Designer’s Guide to WordPress. Berkeley: New
Riders, 2013. Print.
Hay, Stephen. Responsive Design Workflow. New Riders, 2013. Print
Krug, Steve. Don’t Make Me Think – A Common Sense Approach to Web
Usability. Berkeley: New Riders, 2006. Print.
Marcotte, Ethan. Responsive Web Design. New York, New York: A Book
Apart, 2011. Print.
Lupton, Ellen. Graphic Design Thinking. New York, New York: Princeton
Architectural Press, 2011. Print.
Pratt, Andy & Nunes, Jason. Interactive Design. Beverly, MA: Rockport,
2012. Print.
Roberts, Lucienne & Wright, Rebecca. Design Diaries: Creative Process in
Graphic Design. London: Laurence King Publishing, 2010. Print.
62
63. 63
Works Cited/Online Sources:
Bernstein, Mark. "10 Tips on Writing the Living Web." A List Apart: For People
Who Make Websites. A List Apart Mag., 16 Aug. 2002. Web. 4 May 2009.
Hickox, David. “Life Below 960px”. Slide share. Sep 05, 2013. Web. 4 May 2014.
<http://www.slideshare.net/davidhickox/life-below-960px-an-intro-to-responsive-
design-wordcamp-birmingham-2013>.
http://www.smashingmagazine.com/2013/03/13/guide-wordpress-theme-
options/
https://yoast.com/wordpress-theme-anatomy
http://www.smashingmagazine.com/2013/02/21/wp-theme-development-
process/
http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/
http://www.shootonline.com/news/top-spot-todaro-gsdm-storm-radio-shack-
icons-1980s-phone-call
http://success.adobe.com/en/uk/programs/products/digitalmarketing/
1401-30364-econsultancy-digitaltrends.html?
s_cid=701a0000002IagkAAC&s_iid=701a0000002ILMVAA4&skwcid=AL!3085!3!
40807008245!p!!g!!web%20trends&ef_id=U2EExQAABYLZ-SmV:
20140430141221:s
http://www.forbes.com/sites/thesba/2014/02/10/top-web-design-trends-in-2014/
http://codepen.io/popular/
https://www.getty.edu/education/teachers/building_lessons/principles_design.pdf
http://responsive.is/typecast.com Prototyping with HTML & CSS