Design Your Identity: A Web Design Project using Illustrator and Dreamweaver ~

common object example

Learn These Tools & Concepts:

checkPen Tool

checkSelection and Direct Selection Tools

checkColor Palette

checkCSS Styles

check 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.

Example 1

Example 2

Example 3

Example 7

Example 8

Example 9

 

Example 4

Example 5

Example 6

 

 

 


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.

http://www.globalcoral.org/


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.

http://www.urbaneco.org


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.

http://www.solarenergy.org


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.

http://ran.org


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.


http://www.surfrider.org/


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.

http://www.solarpowerrocks.org/


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.

4 logos

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.

sketch logo examplecompleted example

3) Build a website around your Illustrator document using the colors and codes you developed for your logo.

Design Your Identity - Day 1

Art New Media

New Project Begins Today  ~ 

Introduce this PBL project by reading the Entry Document with the Class - Create a Corporate Identity Web Page.

check Reflection Journal - Attach your previous project to your portfolio and reflect upon what you have learned from the previous project.

checkChoose Your Organization - Pick your Non-Profit

check Tutorial #1 - Simple Shapes in Illustrator - Attach by the end of Class.

checkCreate a New Site In Dreamweaver the simple way or using more complicated FTP.

checkBegin Sketching your Logo and Web Page Layout please …


Design Your Identity - Day 2

Art New Media

"Design Your Identity - Day 2"  ~  

checkJournal - What do Colors Mean?  You have only 10 minutes to complete this task.

checkTutorial #1 - Weird Nike Swish Tutorial - Attach by the End of Class.

checkTutorial #2 - Wireframe in Illustrator - Attach by the End of Class.

checkFinish 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

Art New Media

"Design Your Identity - Day 3"  ~  

checkJournal - Which One is Better? You have only 10 minutes to complete this task.

checkTutorial #1 - Star Shapes in Illustrator - Attach by the End of Class.

checkTutorial #2 - Wireframe - Attach as much as you can by the End of Class.

checkTutorial #3 - Aboriginal Dot Art - Attach as much as you can by the End of Class.

checkFinish your Sketches - All on One Page please … You've had 3 Days!

checkView this Layer Basics movie … .

Workshop - View and critique Sketches


Design Your Identity - Day 4

Art New Media

"Design Your Identity - Day 4"  ~  

check Journals - Name 2 New Things you Learned about layers … You have only 10 minutes to complete this task.

OR

check Journals - What do Colors Mean on a Logo - You have only 10 minutes to complete this task.

OR

checkJournal - Slogo Logan! You have only 10 minutes to complete this task.

checkTutorial #1 - RadioGraph Tutorial - Attach by the End of Class.

checkTutorial #2 - Choose your Colors For this Project - Attach by the End of Class.

checkTutorial #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

Art New Media

"Design Your Identity - Day 5"  ~  

check Journal - What can you take from this example? You have only 10 minutes to complete this task.

checkTutorial #1 - More Basic Shapes in Illustrator - Attach by the End of Class.

checkTutorial #2 - Coupon - Attach by the End of Class.

checkTutorial #3 - Aboriginal Dot Art - Attach as much as you can by the End of Class.

checkTutorial #4 - Template Layers in Illustrator - Attach by the End of Class.

checkFinish your Sketches in Illustrator - Due Today!


Design Your Identity - Day 6

Art New Media

"Design Your Identity - Week 2"

checkJournal - Why is this a bad logo? You have only 10 minutes to complete this task.

checkTutorial #1 - Ovelapping Text - Attach by the End of Class.

checkTutorial #2 - Squid Tentacles - Attach by the End of Class.

• Continue your logos.  

• View - History of Identitys PPT


Design Your Identity - Day 7

Art New Media

"Design Your Identity - Day 7"

checkJournal - View these Student Identitys … You have only 10 minutes to complete this task. .

checkTutorial #1 - Create a Identity out of Three Letters - Attach by the End of Class.

checkTutorial #2 - Happy Clouds with Illustrator - Attach by the End of Class

checkTutorial #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

Art New Media

"Design Your Identity - Day 8"

checkJournal - Pick one of these logos from the logo factory - You have only 10 minutes to complete this task.

checkTutorial #1 - Spry Menu - Attach by the End of Class.

checkTutorial #2 - Type on Path - Attach by the End of Class.

checkTutorial #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

Art New Media

"Design Your Identity - Day 9"

check Journal - Horizontal vs. Vertical Navigation - You have only 10 minutes to complete this task.

checkTutorial #1 - Spry Menus - Attach by the End of Class.

checkTutorial #2 - Nav Gradients - Attach by the End of Class.

checkTutorial #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

Art New Media

"Design Your Identity - Day 10"

checkJournal - Favicon Journal - You have only 10 minutes to complete this task.

checkTutorial #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

Art New Media

"Design Your Identity - Day 11"

checkJournal - Name 2 Things you would fix to make this website Better! You have only 10 minutes to complete this task.

checkTutorial #1 - Swirls and Vines in Illustrator- Attach by the End of Class.


Design Your Identity - Day 12

Art New Media

"Design Your Identity - Day 12"

check Journal - What are you trying to communicate with your work? You have only 10 minutes to complete this task.

checkTutorial #1 - Gradient Backgrounds and Responsive Layout - Attach by the End of Class.

checkTutorial #2 - Swirls and Vines in Illustrator- Finish From Yesterday.

Workshop - Responsive Layouts Example.


Design Your Identity - Day 13

Art New Media

"Design Your Identity - Day 13"

check Journal - What kind of Car would your Website be? You have only 10 minutes to complete this task.

checkTutorial #1 - Grind those Gears - Attach by the End of Class.

checkTutorial #2 - Javascript Slider - Attach by the End of Class.

Project Due in 3 Days - Responsive Layouts Example again.


Design Your Identity - Day 14

Art New Media

"Design Your Identity - Day 14"

check Journal - Designer vs. Programmer - You have only 10 minutes to complete this task.

checkTutorial #1 - Add Borders to your content div - Attach by the End of Class.

checkTutorial #2 - Social Media Icon - Attach by the End of Class.

Project due tomorrow!


Design Your Identity - Day 15

Art New Media

"Design Your Identity - Day 15"

check Journal - Compare with Someone - You have only 10 minutes to complete this task.

checkTutorial #1 - Add Borders to your content div - Attach by the End of Class.

checkTutorial #2 - Upload your site to the Web - Attach by the End of Class.

Project due Now!