2. “A lot of times people don’t know what
they want until you show it to them.”
–Steve Jobs
3. A lot more goes into a
web site than just code.
You’ve got big ideas and your
process book will help you
document your creative process.
4. A process book can be used to present
ideas to your client or boss.
Think of it as a way for you to sell your work to them.
5. Your presentation should impress the client.
They should be impressed enough that they
want to continue working with you
6. You are a graphic designer.
Your presentation shouldn’t look
like it was designed in word or
powerpoint. It should be
designed to impress the client.
7. Your cover page
should excite us.
Be sure it includes the
project name, your name,
the course name, your
instructor's name, and the
semester you are taking
the course.
8. An introduction will help us understand what
we’re about to view.
This may be a creative brief summary or your project description.
10. Get us inspired.
It’s great to share your creative
inspiration. But don't just show me a
bunch of pictures though. Help us
understand why you're showing us
all the inspiration you're including in
your presentation.
11. Get inspired away
from the computer.
Before you design a web
site get creative away from
the computer. Working
only behind a computer
will crush your creativity.
Find inspiration elsewhere
every chance you get.
12. A site map can help
you get organized.
It can help your client or
boss see what is needed to
complete the project.
13. A sitemap is one of the key 1st steps to creating a web site.
It’s an outline that can help you plan how many pages might be created
and allows you to think of the content and navigation necessary.
15. Mindmapping can help
you think through ideas.
They can be useful,
especially when you’re stuck
or your mind is overflowing
with ideas. Mindmapping
tools can be a useful
alternative to drawing them.
16. Type studies allow you to test drive
your typographic ideas.
Before you move full speed working on your web site design begin
by thinking about the typography you might use.
17. Show a minimum of two type studies.
Be sure to indicate heading, subheading, and body copy typefaces.
18. The web doesn’t give
you an excuse to
ignore typography.
You are designing for the
web so you will face type
limitations but that doesn't
give you an excuse to
ignore good typographic
principles. Web fonts
should usually be used for
body copy. For identity and
heading fonts you may use
images or font replacement
techniques.
http://www.busesatthebrewery.com/
19. Color studies help you explore color schemes.
It helps to think through potential color
combinations for your project early on.
20. Study how colors interact with other colors.
Color can draw a user into a web site and interest them.
It can also also heavily impact legibility.
21. Take time to get
inspired by color.
Don’t expect for color
schemes to just
miraculously pop up in
your head as you design.
Reference great color
design and refer to
inspirational color
resources to help you come
up with potential color
schemes for your project.
http://www.colorschemer.com/
http://www.colourlovers.com/
http://kuler.adobe.com/
22. Wireframes or rough drafts can
help you plan out your ideas.
Sharing rough ideas could save you hours of time that you might
invest in photoshop on an idea the client might think is lame.
23. If your sketches are too rough your
client will never understand your ideas.
Write or type notes to help us understand your ideas.
24. Wireframes shouldn’t be too vague.
Never assume that we’ll understand the ideas in your head. It doesn’t
matter how perfect they look, if they don’t communicate your ideas they
are useless to the client.
25. Explore multiple ideas.
Thinking through more than just your first idea could
lead to a more creative solution for your project.
26. Sketch out ideas to share your plans.
It may seem like busy work, but it’ll likely save you a
lot of time thinking through layout ideas this way.
27. Wireframes should be rough but clear.
The should communicate layout, content and
interactivity plans for your project.
28. Sketch a home & sub page idea.
Thinking through the page structure for more than one
page will help you anticipate changes between pages.
29. Wireframe tips
•Don’t use lined paper
•Don’t just draw boxes - explain what the box would be used for.
•Be sure to identify all the important sections on your web page.
•Don’t just write “text” or “image” - be clear in the type of
content that might be used in the site.
•Write or type notes to help the client understand your ideas.
•Your client can’t understand chicken scratch so type notes if
necessary and make sure your sketches aren’t too sloppy.
•Wireframes aren’t finished concepts, they are initial ideas.
•Scans or photos of wireframes should be a good quality.
30. Before you ever code a thing...
You must first design your web page visually.
31. Comps are created to help share your ideas.
They help the client understand what you want to do before you code.
32. Always present more than one idea.
And present a home & sub page of each idea.
33. Comps should look just like a real web site.
But they shouldn’t function yet.
34. Show the variation between pages.
It can help the client get excited about a project and understand your ideas.
35. Page layouts don’t have to look identical.
But they should have some consistency between pages.
36. Think about the web site’s interactivity.
What will happen when the user interacts with things like navigation?
37. Design beyond the top fold.
The top fold is what the user sees before they scroll.
38. It helps to see more than just the top fold.
Put your heart into designing the page content.
39. It helps see the whole page, even the bottom.
Give your footer a little TLC...if your user made it that far they
deserve to get that much more excited by your design.
40. Present unique & different ideas.
Don’t just change colors and type. Change the layout and concept.
41. Focus on showing what is important.
You may zoom in or use a unique perspective to help the client get
more excited about the ideas you’re presenting.
42. No if’s, and’s, or but’s
about it...use a grid.
In web design a grid system
can help you align elements
in your page and create a
stronger page flow and
improve hierarchy in a page.
Two popular grid systems
http://960.gs/
http://cssgrid.net/
43. Using a grid system helps keep things aligned.
Templates are available online to help you keep elements in your
web page aligned properly.
44. Grids help keep your web site in order.
A variety of grid systems are accessible to web designers.
45. After your site is built, test it.
Share views of your web site tested from web browsers.
46. Test in multiple web browsers.
Test it in as many web browsers as you can to ensure it looks
consistent across multiple web browsers.
47. Test in browsers used on both Mac & PC.
You won’t be able to control what browser or type of computer the
viewer of your web site will be using.
48. Test all pages, not just one.
You’ll want to make sure it’s fully functional on all browsers before
a web site is launched publicly.
49. Identify any issues across browsers.
Make notes if there are any bugs or problems identified that were
not able to be corrected before your project’s completion.
50. Final Process book tips
•The size should be 8.5” x 11” landscape. It’s intended to be
viewed online
•Create a cover page and guide the user through your
presentation with notes, headings, and imagery.
•You’ve got big ideas. Help the client understand what they are.
They should be able to review this without you present.
•Don’t try to cram all your ideas on one page.
•Make sure images are an adequate quality.
•If you put your heart into your process book at the start of your
project you won't have to redesign it by the end of the semester.
•Save as an optimized pdf so it may be shared online.
