View
337
Download
1
Category
Tags:
Preview:
Citation preview
discovery
specification
design
development
build & test
go live
Take the time to understand what you’re really after. Lots of examples, lots of
discussion about what you need vs. what you want, talks about how you’ll use the
site, what you hope to gain, how visitors will navigate your new site.
Put things down on paper, make sure they make sense. Identify everything that
needs to be considered, consider it, plan it. All future actions stem from the
specification, testing will be performed against the spec.
The fun part. Bringing color to all the things discussed in the previous two phases.
Functionality comes into better focus, how the site will be used becomes for
apparent, your brand is finally applied.
The boring part. The heads-down, quiet-music-playing-in-the-background phase of
the project. Opportunity to get stuff done on your end, to get the building blocks
built and to make course corrections as needed.
Putting things together and seeing if they work. Really, it’s like that. Sometimes
adding content will break the design, sometimes a solution to a business problem is
inadvertently discovered, we always use an issues list to track what needs to be
done.
The big day, and everything that goes into it: SEO plan, advertising plan, hosting
situation, DNS transfer, training, email blast to existing clients… the launch party.
Most importantly, the launch party.
Talk about abstracts.
Lay down some thoughts on paper and build on them.
Put up the scaffolding. Generate increasingly more complete wireframes until the scope
is clear and the specification process can start.
discovery
“We’re an Interior Design company, so, we have tons of pictures that we want
to highlight on the home page. Our market is very segmented, so we want to
be able to speak to each segment on the home page before directing them to
their own dedicated pages.”
You say:
“Yes, but our images are smaller than that. And we need to have the ability to
place images in the text section as well. In fact, we would like to make that
section a blog that we update daily or weekly. And our CEO wants a new
tagline with the logo.”
You say:
“And we need to have visitors sign up for our mailing list.”
“Got it. Let’s talk about your market segments.” I say:
You say:
Describe each element of each page.
Record all integrations with 3rd party applications, databases, payment systems, etc.
Spell out how visitors will use your site.
Spell out how you will use the site.
specification
Describe each element of
each page.
Record all integrations with 3rd
party applications, databases,
payment systems, etc.
Spell out how visitors will use
your site.
Spell out how you will use the
site.
It looks like this…
Outlines everything the
designers and developers
need to know to build the site.
And like this…
Options presented based on
wireframes and specification.
Chance to discuss the visual as well
as continue the visitor experience
discussion.
Set of page templates delivered
design
Designs are based on the
information and functional
descriptions provided in the
specification, as well the layout
presented in the wireframes.
wireframe
Literal interpretation of
wireframe.
Main elements presented as
outlined in the spec.
Main image rotates to display
market-segment-specific
images, though market
navigation is not clearly
defined in this example.
design example 1
Less literal interpretation of wireframes.
Market segmentation is presented inside the main image, with navigation moving to a
horizontal access, but overall similar in layout to the presented wireframes.
design example 2
Least literal interpretation.
Market segments are divided by the panels, which flip upon roll-over to present a new,
market-specific image and link to landing page. More modern design, uses Flash.
design example 3
Is boring.
Is an opportunity for you to get things
wrapped up on your end, like content
creation.
Consists of heads-down work, rarely
attractive.
development
basecamp
Online project
management tool.
Access to your project
provided at start of
project.
Tracks all milestones,
files, comments, To-
Do’s, etc. in real time.
Eliminates confusion
about project
direction, scope.
Continuous record
of communications
and decisions made.
Fit all the pieces together.
Generate all pages of your site, begin filling with your content.
Testing performed by us relative to spec, by you according to your vision.
build and test
basecamp
Issues, bugs, defects,
things that just aren’t
right go in Issues List.
Each issue has an
owner.
Real-time
collaboration, does
not replace good ol’
phone conversations.
Goal is to resolve all
issues.
Site is built, testing is complete, all issues resolved.
Flip the switch…
go live
Recommended