The document outlines a process for developing websites that includes planning, discovery, design, development, testing, and launch phases. Each phase involves specific tasks, deliverables, and resources. The process emphasizes iterative design, testing designs across different screen sizes, and collaboration between designers and developers.
26. Wireframes
•Content Area
Walk
Home The Vision The Walk The Voices Events Blog Get Involved
Home The Vision The Walk The Voices Events Blog Get Involved
Live Webcast
2nd Live Sharing Volunteers
Webcast BANNER Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod consectetuer adipiscing elit, sed diam nonummy nibh euismod
Friday, June 17th @ 7pm tincidunt ut laoreet dolore magna aliquam erat volutpat. tincidunt ut laoreet dolore magna aliquam erat volutpat.
Contact: brittany@backtolifemovement.com
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
Email
(972) 555-5555
laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Download Promo Materials
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
Past Events laoreet dolore magna aliquam erat volutpat.
October Event
Kickoff Contact Info Address
Virtual Walk Giving
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
Share consectetuer adipiscing elit, sed diam nonummy nibh euismod consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. tincidunt ut laoreet dolore magna aliquam erat volutpat.
Email Map Amount:
Go!
$10.00 Submit
Event Information Contact Information
Copyright Information
Event Information Contact Information
Copyright Information
29. Design Persona
•Content Area
Overview Voice
Personality Map
If your brand could talk, how would they speak? What
Write an overview of the brand personality. sorts of things would they say? Would they speak with a
If your brand were a person, who would it folksy vernacular or a refined, erudite clip? Describe the
specific aspects of your brands voice, and how it might
be? change in various communication situations. People
DOMINANT change their language and tone to fit the situation, and
Maybe you have a mascot which already is the visual so should the voice of your brand.
representation of the brand personality. If so, describe its traits
and how that relates to the personality you want to convey. Provide examples of the type of copy that might be
used in different situations in your interface. This will
help writers quickly get a sense for how your design
persona should communicate.
UNFRIENDLY
FRIENDLY
SUBMISSIVE
http://aarronwalter.com/design-
personas/
32. Delivery
Homepage Header Content Page
Elements The different textures in the header add a
richness and detail to the overall design, but Elements
will not clash with other graphics and will not
Rotating Banner grab visitors’ eyes away from the content. We created one example of a content page,
For the home page, we have designed it to The identity of Trinity Church is clear, but not but we will provide a couple of different
have one large area for a rotating banner. In distracting. configurations with different column
addition, we have placed extra white space placement for Jason to use in the website.
around the banner so that the images can
stand on their own. This helps the most Banner
important content (the banner image) grab All content page templates will have one
users’ attention and prevents the color
Navigation
section for a banner or “featured content” of
palettes from the header and the banner graphics or text. If the banner is not
graphic from having to complement each necessary, it can always be omitted on any
other. We tested this with multiple current For the top navigation, we have reduced the page just by not adding content for the
Trinity banners. number of options to make it clearer where banner section.
On Sunday mornings, the big banner will be information can be found and prevent
replaced by the live video to make it easier to overload for first-time visitors. Only sections
are now listed in the header, while tools and
Sidebar Navigation
get live viewers involved without distraction.
resources are listed in the footer. For navigation within a section, we think that
the navigation needs to be in a sidebar on the
Featured Elements left side. Because this will be consistent,
Under the home page, we have designed an users will be able to find pages more clearly
area to highlight the most important events or and the navigation will appear next to the
content pages (like the “What to expect” content where their eyes are already looking.
page). This is just a content area (not We have added arrows to show that it is
hardcoded into the template),so Jason can clearly a menu and encourages first-time
easily change the number of columns or their visitors to explore. In addition, we
relative distribution across the total width automatically highlight the current page with
(e.g. Three columns could be 1/2 + 1/4 + 1/4). a consistent green so that users always know
where they are.
48. Multiple Lo-Fi Iterations
•Play with other sizes early
•See how your grid needs to adjust
•Play with layouts
•Play with typography
•Ignore perfection
I blog at pocketrevolutionary.com\nI own Craft + Story\n\nNo matter if you're a solo designer, project manager, or part of a development team, understanding and developing processes is important to successful projects. I've worked with teams and clients of all different sizes and makeups (solo, internal teams, contractors, design teams, etc.), and I've learned some best practices and tips.\n\nI'm going to walk through the process of a standard project from first meeting to discovery, strategy, design, development, deployment, and management, and I'll highlight how to keep things on track and some of the sub-processes (like visual design) that we have experimented with over the years. For instance, I'm going to cover different possible steps in the visual design like personality profiles, mood boards and style tiles that can be helpful for experienced designers, students and project managers to know about.\n\nI will also talk about how we can use some of the features of TYPO3 like the separation of content from visual design and workspaces to make our processes run even smoother and allow multiple steps to run concurrently (like developing content strategies while the final CSS is being finished).\n\nFinally, I want to talk about how responsive design (and a general separation of content from visual design) should affect our processes. The new world of multiple screens means that our design and development process has a iterative loops of designing a static comp, iterating at different sizes, creating a functional mockup, iterating some more at different sizes, and finally building a TYPO3 template.\n
\n
backend developer, web designer, frontend developer, Java programmer, systems administrator, web director, creative director, and founder of my own studio.\n
You + internal team\nYou + your team + decision maker\nYou + your team + client team + decision maker\nYou + client team\nYou + your team + outside contractors + client team + decision maker\n
Waterfall\nScrum\nKanban\nChaos theory\n
I was a bored manager sometimes. It was either get in my designers’ ways or start playing with a new tool. Instead, I ran a sort of “lab” for different processes and found the unifying pieces that we integrated into our overall process.\n
\n
•Helps you make accurate projections.\n•See where you are in trouble.\n•If you're the professional, it's your job to define the process.\n\n
•Gets you ready to go.\n•Makes sure you start in order.\n\n
•Helps you know what's coming next.\n•If you get lost or have to pause, it can help you find where you are.\n•See who's court the ball is in.\n•The process, like a recipe, always points to what's coming up next even if you're "improvising" some of the steps.\n\n
•Tells you when to add or shift resources.\n•Prevents you from wasting time.\n•Manage scope creep.\n•The process is there to save you from screwing up or running everything in your head.\n•Process is like your contract. It might be invisible until it hits the fan.\n\n
\n
•Make the process your own.\n•You can still improvise steps\n▼Adapt the process to the project\n•Make those adaptations beforehand when at all possible.\n\n
\n
•Owner\n•Vision / Mission Statement\n•Random information about project\n•Links to other parts of the project\n•Show example\n\n
•Build clickable mockups in HTML\n•Create skin or template\n•Build special functionality while the client is working on content\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
▼Ignore pixel perfection for different sizes\n•If you don't trust the developer to know at least as much (preferably more) about responsive design techniques and pitfalls than a designer, you're already screwed. \n