My Topic Website

The purpose of this project was to create a website based on a topic of our choosing.  I chose potatoes, because I thought it would be fun to learn more about a food I enjoy and be able to tell others some cool things about them.  I began this project be doing some research on the history of potatoes, some of their health benefits, and some interesting ways to cook with them. Then, I made the CSS of my site to match the colors of the image of potatoes I used as my background.  Next I gathered all of the images I used on my website and edited them in photoshop.

I had some issues along the way with transferring the CSS from my base site without having them linked together, but I fixed it by making sure that I made a copy of the style sheet and it had a different title.  Overall, I learned a lot about Dreamweaver and became more comfortable with its different functions.  I will use the skills I learned in this project to make other websites using HTML and CSS even faster and better!

Click here to check out my potato website!

Graphic Design Final Project

Here are my personal business cards! To make the top one, I made a hexed polka dot pattern in illustrator and placed my personal logo on top of a white circle.  I liked how the small polka dots complimented my personal logo without overwhelming it.  

I decided to model my second business card after the example shown on the right. The image I used is of the Kansas City skyline, since that is where I'm from.  I like how it's simple, but makes a statement about who I am.

Here is my postcard!  I made it by creating a clipping mask on top of a sunset image and moving the copy to make the text visible. 

Repeat Pattern and Motif

To make my motif, I first used the direct select tool to morph an ellipse.  then I used the rotate tool to rotate it, then I used pathfinder to exclude some parts of the shape.  This motif was so simple to make, and I enjoyed using the skills I acquired on Illustrator to make interesting shapes.  

The process for my repeat pattern was similar to my motif.  I started by creating the flower using the rotate tool, and then used option drag to copy it.  I used the pattern maker to make the quadrant pattern feel.  Overall, I learned a lot about repeat patterns and use of white space while doing my repeat pattern.

Everything There is to Know About HTML Colors

Hexadecimal Codes

Hexadecimal codes are made up of 6 numbers or letters and follow a hashtag.  They follow the template #RGB, meaning red, green, and blue, and there's two numbers or letters for each color.  The numbers range from 0-6, one being the least color and 6 being the most, and the letters go from A-F, where A is more color than 6 and F is the most. 

For example, here's what the code would 
look like for a div with a black background and white text:


Color Words

Color words are very useful when you don't 
need a specific color.  You can use them 
by simply putting them in place of a color 
code, but be sure not to use any spaces! 
The example to the right shows the code 
of a body with a black background and white 
text using color words.

Here's a chart of a few color words and their hexadecimal codes:

RGB and RGBa

Instead of hexadecimal codes or color words, you can use RGB or RGBa format to get a little but more of a variety in color choice.  The image at the right shows how to switch to RGB or RGBa in dreamweaver when making a CSS rule. RGB is displayed as three numbers in parentheses separated by commas, and RGBa is the same except for a fourth number on the end that will always be between 0 and 1.  That fourth number controls transparency, 0 being completely transparent and 1 being completely opaque.  The code below shows 4 increasingly opaque sections:

Final Product

Here is what the code above looks like over an image.  Now you know how to put color and transparency in your webpages!

Additional Links

HTML Color Words and Codes

More About RGBa

My Pencils

     For this project, I began by using the tutorial to learn how to make the pencil.  During the tutorial I started to look away from it and figure out the shapes myself, only checking it to make sure I had the right dimensions.  This process helped me discover more about Illustrator on my own and retain more of what I was learning.  When it became time to make my creative pencil, I remembered how to create it and how to use the live paint bucket tool to customize it.  I decided to make a huge pile of pencils with 2 in the cup because I feel like it represents me well: I am very messy and
unorganized sometimes, but I'm trying to figure it out.

    My biggest takeaways from this project were all about being more comfortable and knowledgeable with Illustrator.  I learned how to rotate a shape to create my flower, and, more generally, how to use the tools and settings in Illustrator to turn basic shapes into really cool objects.  I also learned many shortcuts, such as command+G is how you group something, and also how to create a cylinder using two different pieces in order to manipulate it more easily.

What is Graphic Design?

graph·ic de·sign

noun

1. the art or skill of combining text and pictures in advertisements, magazines, or books.

This is the definition you get for graphic design when you look in a dictionary, but graphic design is so much more.  It could be an image on a website, or a logo on a t-shirt.  It is the pictures on your albums and the posters on your walls.  Graphic design is all around us, in everything we see, and every single thing gives us a message.  We are influenced by all the images around us and, most of the time, we don't even realize it.  

To me, graphic design is made to leave an impact.  

The impact could be small: you start paying attention to something you never would have because of a meaningful graphic, or even change the way you think about a topic. Graphic design is the language of life, and whether we notice or not, everything we see changes the way we see the next thing.  It is humanity, and it is everywhere.


cool album covers

The Evolution of Websites

Herzl Camp

As you can see, the Herzl Camp website has changed drastically since 2001. The old website, shown on the left, contained only a block of content in the middle of the webpage, while the new website, on the right, fills the entire screen.  The font for the logo remained the same, although the colors are different.  The new website shows just a picture of the lake, contrasting from the small collage of camper pictures displayed on the old website.  The simply displayed links on the 2001 website make the site almost easier to use than the dropdown links the new website has on it's toolbar.  While the new website may be aesthetically pleasing, the simpler layout of the old website makes it much more easy to use.

The code of the two websites are very different, too.  Because of the way html used to be, the 2001 code has a lot of table and td tags, and not very many divs.  Now, we don't use many tables and instead use divs and lists.  There's less code in the old website because there was so much less content  then on the new site.

___________________________________________________________________________

Pandora

The pandora website from 2006 didn't not have much aesthetic design.  It consisted of mainly text describing what the purpose of the website was, and had a plain yellow background.  This is very different from the 2015 version, where there is only a short description and a type box to instantly create a radio station.  The background is blue, with a floating circle design.  The font for the Pandora logo is still the same.

Like the Herzl website, the old version of HTML contained a lot of tables and td tags.  The 2015 version uses a lot of divs, which makes the overall code easier to read.  The old website still had less code due to how much less content it had.

__________________________________________________________________________

Skype

The old Skype website was very clunky looking.  It had a busy layout that made it hard to process all the different aspects of the webpage.  The new webpage, however, developed a scrolling layout that looks much sleeker but still contains all the information. The Skype bubble logo is still the same, but it changed from green to blue.

Like the other two websites, the old version contains a lot of tr and td tags, which makes the code look really messy.  The updated website has a lot of div tags, which make the code look much more organized and manageable.