Design Your Identity: A Web Design Project using Illustrator and Dreamweaver ~
Pen Tool
Selection and Direct Selection Tools
Color Palette
CSS Styles
HTML
• This is a typical design project you might get working a graphic/web design studio: You don't get to choose your client!
• Illustrator is the tool of choice for these design projects because of it's crisp vector artwork which can be easily scaled and retain all the detail for use on everything from a billboard to postage stamp size.
• The tuff part is coming up with the idea … So begin this project by sketching possible logo ideas on paper.
• Remember - It All Begins with Pencil and Paper!
Other People's Work:
These are examples created by students following this project.
Requirements:
You are assigned one of the following non-profit organizations to design an identity for them including a logo and a website.
Be creative …
Just remember a few things:
• The site must be in Template form - only colors, logo with text, navigation and layout - the rest is just place holders that your customers fill in with their content.
• The Logo design must have both text and image in your logo - either the whole name of the organization or it's initials.
• The new identity must reflect the nature of the business as you find in your research. View the company website and come up with your personal interpretation of their new visual identity.
• You must match the colors of your logo to your website.
• You need 4 buttons that link to 4 blank pages for your client to fill in.
• The whole design must have visual impact and be memorable.
•Final design must be rendered totally in Illustrator and Dreamweaver
Due to printing cost constraints, your ad must use one of these color schemes:Analogous – Complimentary – Monochromatic – Triadic
Non-Profit Corporate Identity Web Design Project
Begin by doing some research on your organization to generate some ideas:
Group #1 - Coral Reef Alliance
The Global Coral Reef Alliance is a small non-profit organization dedicated to growing, protecting and managing the most threatened of all marine ecosystems—coral reefs. Founded in 1990.
GCRA is a coalition of volunteer scientists, divers, environmentalists and other individuals and organizations, committed to coral reef preservation. We primarily focus on coral reef restoration, marine diseases and other issues caused by global climate change, environmental stress and pollution.
Group #2 - Electric Auto Association
The Electric Auto Association (EAA) is a non-profit educational organization formed in 1967 in San Jose, California to promote the widespread adoption of Electric Vehicles (see our mission statement).
Electric vehicles (EVs) are practical, clean, quiet alternatives to noisy, pollution-spewing gasoline and diesel vehicles. Electric Vehicles keep our Earth cleaner and help preserve our natural resources. EVs are a smart and efficient choice for personal transportation.
To find out more: http://www.eaaev.org/
Group #3 - Urban Ecology
Urban Ecology was founded in 1975 by visionary architects and activists who believed that cities should serve both people and nature. From the beginning, Urban Ecology has used urban planning, ecology, and public participation to help design and build healthier cities.
Urban Ecology’s mission is serious, but its roots are lighthearted and creative. In the mid 1970s, one of Urban Ecology’s founders, Richard Register, grew a vegetable patch in his 1968 Pontiac GTO to lampoon America’s love of cars. Dubbed the “Veggie Car,” it traveled to energy fairs, street festivals, and community gardens before it was finally retired to a playground.
Around the same time, urban ecologists strapped on roller skates to distribute “Gasaholics Anonymous” parking tickets in Berkeley, inviting vehicle owners to question their dependence on automobiles and join in the fight to create cities built for people, not cars.
Group #4 - Solar Energy International
Solar Energy International (SEI) is a USA non-profit organization whose mission is to help others use renewable energy and environmental building technologies through education.
SEI teaches individuals from all walks of life how to design, install and maintain renewable energy systems, and how to design and build efficient, sustainable homes. SEI offers training online and in 22 locations around the world.
Group #5 - Rainforest Action Network
Rainforest Action Network is uniquely suited to making enormous changes happen. We're tough. We're Tenacious. We think big. And we won't ever back down.
In our 25-year history, we have secured hundreds of critical victories for the environment and Indigenous communities around the world and have helped protect millions of acres of forests in Indonesia, Canada, Chile, Brazil and beyond.
To protect the world's remaining rainforests we must take bold and immediate action - and we need the full commitment of people like you.
Group #6 - Surfrider
The Surfrider Foundation is a grassroots non-profit environmental organization that works to protect and preserve the world's oceans, waves, and beaches.
The Surfrider Foundation largely focuses its work on such issues as water quality, beach access, beach preservation and sustaining marine and costal ecosystems.
Headquartered in San Clemantie California, the Surfrider Foundation maintains a small staff, which work to support the organization's network of grassroots chapters.
Group #7 - SOLAR POWER ROCKS!
While some of the brightest minds have created innovative technologies to help us overcome pollution and our reliance on imported non-renewable resources, we face an enormous challenge – implementation.
We noticed a lack in the accuracy and availability of state-specific rebates and tax information online. Moreover, many payback calculations provided by various sources were flat out wrong. This left us to reason many of those interested in solar may have given up or were frustrated by the task of seeking out these important facts.
In 2007, we created SolarPowerRocks.com to provide the clear, easy to understand information people need to install solar energy across the country.
What's Due: 3 Stages ~
1) Create 3 to 4 Thumbnail Sketches of your logo design concepts all on 1 page.
These are simple and small pencil sketches that communicate the range of ideas you are considering.
You will receive feedback and opinion from group members and the instructor - on which 1 or 2 designs have the most potential.
2) Take your best version of the new logo and render it in Illustrator.
3) Build a website around your Illustrator document using the colors and codes you developed for your logo.
Design Your Identity - Day 1
Create a Corporate Identity Web Page.
Reflection Journal - Attach your previous project to your portfolio and reflect upon what you have learned from the previous project.
Choose Your Organization - Pick your Non-Profit
Tutorial #1 - Simple Shapes in Illustrator - Attach by the end of Class.
Create a New Site In Dreamweaver the simple way or using more complicated FTP.
Begin Sketching your Logo and Web Page Layout please …
Design Your Identity - Day 2
Journal - What do Colors Mean? You have only 10 minutes to complete this task.
Tutorial #1 - Weird Nike Swish Tutorial - Attach by the End of Class.
Tutorial #2 - Wireframe in Illustrator - Attach by the End of Class.
Finish Sketching your Logo and/or Web Page Layout please …
• Workshop - Review the 4 Sketches required for this project - Keep in Mind you are making a web page! You will also need to Sketch Your Web Page Layout & incorporate your Logo into it.
Design Your Identity - Day 3
Journal - Which One is Better? You have only 10 minutes to complete this task.
Tutorial #1 - Star Shapes in Illustrator - Attach by the End of Class.
Tutorial #2 - Wireframe - Attach as much as you can by the End of Class.
Tutorial #3 - Aboriginal Dot Art - Attach as much as you can by the End of Class.
Finish your Sketches - All on One Page please … You've had 3 Days!
View this Layer Basics movie … .
• Workshop - View and critique Sketches
Design Your Identity - Day 4
Journals - Name 2 New Things you Learned about layers … You have only 10 minutes to complete this task.
OR
Journals - What do Colors Mean on a Logo - You have only 10 minutes to complete this task.
OR
Journal - Slogo Logan! You have only 10 minutes to complete this task.
Tutorial #1 - RadioGraph Tutorial - Attach by the End of Class.
Tutorial #2 - Choose your Colors For this Project - Attach by the End of Class.
Tutorial #3 - Aboriginal Dot Art - Attach as much as you can by the End of Class.
View this History of Identitys PPT
• Workshop - Logos due Tomorrow!
Design Your Identity - Day 5
Journal - What can you take from this example? You have only 10 minutes to complete this task.
Tutorial #1 - More Basic Shapes in Illustrator - Attach by the End of Class.
Tutorial #2 - Coupon - Attach by the End of Class.
Tutorial #3 - Aboriginal Dot Art - Attach as much as you can by the End of Class.
Tutorial #4 - Template Layers in Illustrator - Attach by the End of Class.
Finish your Sketches in Illustrator - Due Today!
Design Your Identity - Day 6
Journal - Why is this a bad logo? You have only 10 minutes to complete this task.
Tutorial #1 - Ovelapping Text - Attach by the End of Class.
Tutorial #2 - Squid Tentacles - Attach by the End of Class.
• Continue your logos.
• View - History of Identitys PPT
Design Your Identity - Day 7
Journal - View these Student Identitys … You have only 10 minutes to complete this task. .
Tutorial #1 - Create a Identity out of Three Letters - Attach by the End of Class.
Tutorial #2 - Happy Clouds with Illustrator - Attach by the End of Class
Tutorial #3 - Aboriginal Dot Art - Attach as much as you can by the End of Class.
• Workshop - What are you going to do with your Logo when you finish? 5 components of the average web page workshop …
Design Your Identity - Day 8
Journal - Pick one of these logos from the logo factory - You have only 10 minutes to complete this task.
Tutorial #1 - Spry Menu - Attach by the End of Class.
Tutorial #2 - Type on Path - Attach by the End of Class.
Tutorial #3 - Aboriginal Dot Art - Attach as much as you can by the End of Class.
• Workshop - What are you going to do with your Logo when you finish? 5 components of the average web page workshop …
Design Your Identity - Day 9
Journal - Horizontal vs. Vertical Navigation - You have only 10 minutes to complete this task.
Tutorial #1 - Spry Menus - Attach by the End of Class.
Tutorial #2 - Nav Gradients - Attach by the End of Class.
Tutorial #3 - Google Fonts - Attach by the End of Class.
• Workshop - What are you going to do with your Logo when you finish? 5 components of the average web page workshop …
Design Your Identity - Day 10
Journal - Favicon Journal - You have only 10 minutes to complete this task.
Tutorial #1 - Favicon - Attach by the End of Class.
• Workshop - What are you going to do with your Logo when you finish? 5 components of the average web page workshop …
Design Your Identity - Day 11
Journal - Name 2 Things you would fix to make this website Better! You have only 10 minutes to complete this task.
Tutorial #1 - Swirls and Vines in Illustrator- Attach by the End of Class.
Design Your Identity - Day 12
Journal - What are you trying to communicate with your work? You have only 10 minutes to complete this task.
Tutorial #1 - Gradient Backgrounds and Responsive Layout - Attach by the End of Class.
Tutorial #2 - Swirls and Vines in Illustrator- Finish From Yesterday.
• Workshop - Responsive Layouts Example.
Design Your Identity - Day 13
Journal - What kind of Car would your Website be? You have only 10 minutes to complete this task.
Tutorial #1 - Grind those Gears - Attach by the End of Class.
Tutorial #2 - Javascript Slider - Attach by the End of Class.
• Project Due in 3 Days - Responsive Layouts Example again.
Design Your Identity - Day 14
Journal - Designer vs. Programmer - You have only 10 minutes to complete this task.
Tutorial #1 - Add Borders to your content div - Attach by the End of Class.
Tutorial #2 - Social Media Icon - Attach by the End of Class.
• Project due tomorrow!
Design Your Identity - Day 15
Journal - Compare with Someone - You have only 10 minutes to complete this task.
Tutorial #1 - Add Borders to your content div - Attach by the End of Class.
Tutorial #2 - Upload your site to the Web - Attach by the End of Class.
• Project due Now!



