This is an important aspect to the work of Web Designers. What follows is a listing of some interesting ideas on Design Comps and how to pull them together.
Shopping Cart Comp
Explanation of Design Comps
Cornell University Design Comp discussion
Monday, October 27, 2008
Notes on Designing a client website
Part I: Designing a client website using Adobe Fireworks
Tonight we are using Adobe Fireworks to layout a design for the non-profit company's website. The product we're creating is called a Design Comp. This an electronic drawing that shows a detailed design of a web page.
Your goals for this activity:
• Apply design principles when creating visual designs.
• Create design comps of a home page and a sample content page to show different looks.
• As a team, select the best design comps to present to a client.
Reading Assignment: Start the tutorial
Design Comps are composed of the following elements. It's important to consider each aspect as you develop your skill in communicating your client's plans for a website.
Mood: The comp is the client’s first impression of what the site really looks like. The comp should immediately convey an appropriate message, such as fun, serious, youthful, organized, trendy, or family-oriented.
Color: Colors should be well coordinated, fit the mood and tone of the site, and provide enough contrast for legibility. Discuss web-safe colors and decide whether it’s appropriate for students to design only with web-safe colors. To see how colors work together and to match colors, visit the color wheel found on Well Styled.com
Fonts: Use different fonts sparingly to be effective; consider how size and weight draw attention. Most sites are designed with one or two fonts, using size, color, and boldface for further distinction. Make sure the contrast between the font and background colors is adequate to make the text legible. Discuss which fonts are common on Windows and Macintosh operating systems.
Images: Images reflect the content and mood of the site. Photographs should be the highestquality images. Graphics should match the mood and tone of the site. Text used with an image should be close enough to be visually associated with the image. The logo of an organization should be properly positioned, sized, and so on. Go get images from Getty Images.
Text: Web visitors are more likely to skim than to read carefully. The biggest challenge is to use only as much text as is necessary to convey key messages. Organize the text so visitors can scan it to find relevant information.
Navigation elements: Buttons, menus, and navigation bars should all reflect the site mood and integrate effectively with site colors, fonts, and images.
Part II: Reviewing and revising to client specifications
After you create the Design Comp the client reviews it and provides feedback on likes and dislikes. You need to revise the Design Comp to reflect all changes from the client. By the end of the class, tonight, you should have completed Design Comps for both the home page and the secondary pages of your website. Those will be used to build the actual website in Dreamweaver.
Your goals during this process:
• Present design comps to a client.
• Use active listening skills during a client review.
• Revise design comps and present revised comps to a client.
• Create production storyboards for a client website.
Tonight we are using Adobe Fireworks to layout a design for the non-profit company's website. The product we're creating is called a Design Comp. This an electronic drawing that shows a detailed design of a web page.
Your goals for this activity:
• Apply design principles when creating visual designs.
• Create design comps of a home page and a sample content page to show different looks.
• As a team, select the best design comps to present to a client.
Reading Assignment: Start the tutorial
Design Comps are composed of the following elements. It's important to consider each aspect as you develop your skill in communicating your client's plans for a website.
Mood: The comp is the client’s first impression of what the site really looks like. The comp should immediately convey an appropriate message, such as fun, serious, youthful, organized, trendy, or family-oriented.
Color: Colors should be well coordinated, fit the mood and tone of the site, and provide enough contrast for legibility. Discuss web-safe colors and decide whether it’s appropriate for students to design only with web-safe colors. To see how colors work together and to match colors, visit the color wheel found on Well Styled.com
Fonts: Use different fonts sparingly to be effective; consider how size and weight draw attention. Most sites are designed with one or two fonts, using size, color, and boldface for further distinction. Make sure the contrast between the font and background colors is adequate to make the text legible. Discuss which fonts are common on Windows and Macintosh operating systems.
Images: Images reflect the content and mood of the site. Photographs should be the highestquality images. Graphics should match the mood and tone of the site. Text used with an image should be close enough to be visually associated with the image. The logo of an organization should be properly positioned, sized, and so on. Go get images from Getty Images.
Text: Web visitors are more likely to skim than to read carefully. The biggest challenge is to use only as much text as is necessary to convey key messages. Organize the text so visitors can scan it to find relevant information.
Navigation elements: Buttons, menus, and navigation bars should all reflect the site mood and integrate effectively with site colors, fonts, and images.
Part II: Reviewing and revising to client specifications
After you create the Design Comp the client reviews it and provides feedback on likes and dislikes. You need to revise the Design Comp to reflect all changes from the client. By the end of the class, tonight, you should have completed Design Comps for both the home page and the secondary pages of your website. Those will be used to build the actual website in Dreamweaver.
Your goals during this process:
• Present design comps to a client.
• Use active listening skills during a client review.
• Revise design comps and present revised comps to a client.
• Create production storyboards for a client website.
Unit 3 Student guide introduction
The topic of this week is Building a Client Website
Download Unit 3 Student Guide
View the Fireworks Adobe Video Library
In this unit, you and your partner will work on a project to build a website for a client. Everyone builds the same site so don't think too hard about the design. The idea of this work is to learn how to apply design principles rather than the actual layout and look of the website. The client is a non-profit seeking the first website. Your team needs to interpret the client’s needs in designing the navigation, the look and feel, and the content flow. The client determines which site most closely meets those needs.
Keep in mind that the focus of this unit is working on a team and designing for someone else. The main emphasis is the design-team process for website development, the team-client interaction for incorporating feedback and changes throughout the development of the site, and the application of techniques that make the site design and content easily reusable and revisable.
To learn more about the design techniques, visit this site on Adobe.com. Adobe’s Website Production Management Techniques (read the information under Define on the
right side of the page for information on defining goals and objectives, creating a project plan, and establishing requirements).
Activities:
3.1 Defining a client website project
3.2: Planning a client project
3.3: Structuring a client website
3.4: Designing a client website
3.5: Reviewing and revising to client specifications
3.6: Implementing a reusable design
3.7: Building a client website
3.8: Testing a client website
3.9: Launching a client website
Download Unit 3 Student Guide
View the Fireworks Adobe Video Library
In this unit, you and your partner will work on a project to build a website for a client. Everyone builds the same site so don't think too hard about the design. The idea of this work is to learn how to apply design principles rather than the actual layout and look of the website. The client is a non-profit seeking the first website. Your team needs to interpret the client’s needs in designing the navigation, the look and feel, and the content flow. The client determines which site most closely meets those needs.
Keep in mind that the focus of this unit is working on a team and designing for someone else. The main emphasis is the design-team process for website development, the team-client interaction for incorporating feedback and changes throughout the development of the site, and the application of techniques that make the site design and content easily reusable and revisable.
To learn more about the design techniques, visit this site on Adobe.com. Adobe’s Website Production Management Techniques (read the information under Define on the
right side of the page for information on defining goals and objectives, creating a project plan, and establishing requirements).
Activities:
3.1 Defining a client website project
3.2: Planning a client project
3.3: Structuring a client website
3.4: Designing a client website
3.5: Reviewing and revising to client specifications
3.6: Implementing a reusable design
3.7: Building a client website
3.8: Testing a client website
3.9: Launching a client website
Week 2 - Unit 2 continued
You need to continue working on unit 2 this week, everyone. You've make progress but you're still a long way from completing this guide. Don't spend time working on projects that won't help you achieve your goal of finishing the assignments from this unit.
The download Unit 2: Student guide now.
The download Unit 2: Student guide now.
Starting your portfolio - week 1
This week, you'll begin the work required to create your Electronic Portfolio. You need to complete the following tasks:
1) Sign up for a web hosting account on Freehostia.com
2) Download the lessons found in your student guide.
3) View the video at Adobe's Video Library for this week. Scroll down and view Adobe Fireworks.
Portfolios communicate accomplishments, works in progress, or personal history. Designers use a portfolio to showcase their previous work when applying for a job. Traditionally a portfolio is a large book or leather case containing design samples. With the Internet, portfolios can be electronic, easily and quickly sharing a designer’s work with anyone in the world.
In this unit, you will create the elements of an electronic portfolio with Adobe Dreamweaver CS3 and Adobe Fireworks CS3. You will build a website that features work you've completed as well as future work. While creating your portfolio, you will need to plan, implement, and test your website design; and reflect on and evaluate your work. Incorporating graphic design techniques is essential in
this unit. The presentation of an electronic portfolio can be just as important as its content. Please focus on these elements as you work during the next week.
1) Sign up for a web hosting account on Freehostia.com
2) Download the lessons found in your student guide.
3) View the video at Adobe's Video Library for this week. Scroll down and view Adobe Fireworks.
Portfolios communicate accomplishments, works in progress, or personal history. Designers use a portfolio to showcase their previous work when applying for a job. Traditionally a portfolio is a large book or leather case containing design samples. With the Internet, portfolios can be electronic, easily and quickly sharing a designer’s work with anyone in the world.
In this unit, you will create the elements of an electronic portfolio with Adobe Dreamweaver CS3 and Adobe Fireworks CS3. You will build a website that features work you've completed as well as future work. While creating your portfolio, you will need to plan, implement, and test your website design; and reflect on and evaluate your work. Incorporating graphic design techniques is essential in
this unit. The presentation of an electronic portfolio can be just as important as its content. Please focus on these elements as you work during the next week.
Getting started with Adobe Cerification for Dreamweaver
Ok, there's a lot to learn over the semester, yes. But, it's not hard and you can definitely do this!
The first semester of Digital Design (Units 1–4) develops skills that lay the foundation for producing web-ready communications: graphic design principles, storyboards, web development, shared project management skills such as interviewing and project scheduling, peer review, and redesign. Project activities focus on developing effective communications that can be deployed on the web. Students
develop a variety of graphical images, an electronic portfolio, and a client website. A great deal of flexibility is implied in the curriculum.
We're going to use a lot of Adobe software including:
Adobe Fireworks
Adobe Flash
Adobe Dreamweaver
To get started, visit Adobe Video library.
The first semester of Digital Design (Units 1–4) develops skills that lay the foundation for producing web-ready communications: graphic design principles, storyboards, web development, shared project management skills such as interviewing and project scheduling, peer review, and redesign. Project activities focus on developing effective communications that can be deployed on the web. Students
develop a variety of graphical images, an electronic portfolio, and a client website. A great deal of flexibility is implied in the curriculum.
We're going to use a lot of Adobe software including:
Adobe Fireworks
Adobe Flash
Adobe Dreamweaver
To get started, visit Adobe Video library.
Adobe Dreamweaver certification start
This course is quickly approaching the break! I'm excited to see the progress your making in learning about Adobe Dreamweaver and the broader topic of certification. Gaining your certification in Dreamweaver is a grest accomplishment but you need to put your best effort into the process. Coming to class ready to work, working quickly and precisely on assigned activities is an important aspect of this effort.
Ms. Wade and I are working with you. We are prepared to offer any degree of support required to help you prepare for the certification. Let us know what you need to become successfully certified Dreamweaver designers.
Ms. Wade and I are working with you. We are prepared to offer any degree of support required to help you prepare for the certification. Let us know what you need to become successfully certified Dreamweaver designers.
Subscribe to:
Posts (Atom)