End of Year Reflection

"#1" Takeaway

Over the course of this year in web design, I learned more than just how to create and design websites. I learned that 1.) web design is hard, but more importantly, I learned that you shouldn't just give up if it is hard. There were many times when my website got messed up or it wasn't turning out how I had expected, but I ended up completing it, and a completed website is better than an uncompleted website. Sometimes, I didn't even want to start a project because it looked way beyond what I could achieve, but once I got started, I learned that it actually was achievable. In other words, it is much better to try than to not. I also learned how to be productive or to manage my time well. Unsurprisingly, if you are procrastinating and not working on a project, chances are that you won't complete it. In addition, I learned that it is okay to ask for help. In my case, I was asking for help quite often, and the answer tended to be "have you tried refreshing it", and that usually fixed the problem. Regardless, help really did help, and once again, it was better to ask for help than to give up. Every once and a while, people actually asked me questions, and sometimes I could answer them. It felt really good to know how to do something well enough to be able to help others. 

Strengths and Weaknesses 

I'm not going to lie: web design is difficult and confusing. I am not the most "techy" person, so I struggled with web design. I understand how to use the CSS panel because it is very user friendly and doesn't really require much understanding of code, but I'm not very good at understanding the code itself. However, at the very beginning of the year, HTML and CSS code looked like a big, ugly jumble of letters, numbers, and symbols, but now I can look at it and get a pretty good understanding of what the code is doing to a website and how it works. I would say that I have an eye for designing websites based off of the color, font, etc..., but I need to work on understanding the code better. 

Application

Now, whenever I see an attractive or cool website, I have a better appreciation of it and how it was designed. In addition, sometimes when I am typing presentations or blogging, I can adjust the HTML or CSS to make it be closer to what I am looking for. This is something that I wouldn't have been able to do prior to being enrolled in Web Design. 

Alterations

If I could change anything about this year in web design, I would have liked to have known that if you arrange you work in the sever into folders, it messes up the websites. I also would have been more careful when copying websites and CSS because sometimes the CSS is still attached and rolls over to the next website. But overall, I wouldn't change anything.

Conclusion

This year had its ups and downs. Sometimes I really disliked a project, and sometimes I really liked a project. I challenged myself by enrolling in web design, and I'm glad that I did because it made me better at pushing through the hard stuff so I could achieve it. I had a good time learning about the interesting world that is the internet and exploring how to add to it. 

Second Semester Reflection

So, this year in graphic design is just about over. Now it's time to reflect over all of the works that I have created throughout the second semester of my Sophomore year. 

Milton Glaser Poster

We started off the seamster by continuing on with our graphic designer we chose. We made a poster that advertised a new exhibit for our artist. I wanted to incorporate the iconic Milton Glaser swirls and the iconic shuttlecock from the Nelson, so I combined the two into the image you see on the right. I really liked this project and how it turned out. It got me interested in simplicity and creativity, as well as color and font. We were only allotted a few days to work on this project, so I barely got it done on time. Our next project expanded upon font.

Typography

The typography project focused on bringing out the art in fonts because fonts are art in themselves. We found quotes that we liked and then studied font psychology to find the perfect font to fit our quote. After doing this, we explored color psychology. We also learned about color schemes and how they can transform a graphic. I enjoyed this project and how it turned out, especially after seeing the progression from peer feedback and revisions.  This project took the rest of third quarter because of the many different aspects. However, it was very hard for me because it was difficult to find fonts that fit my needs, and I felt like it could have been even better. 

Combination Mark Logos

Next, we had our company rebrand assignment that took up all of the fourth quarter. We started by sketching many combination mark logos. Next, we chose are favorite six and created them in Illustrator and then added multiple color schemes to them to find the best look. I liked all of my logos, but I could only choose one to continue the rebrand process. I went with the top right logo because I liked the color combination and the hidden image in the name. I liked creating all of these logo. However, it was very time consuming and took a lot of patience and rain storming. 

Letter head

A letter head is a piece of paper that someone can write a letter or note on. It has the logo and company information on it, as well as appealing graphics.  I wanted to include electricity because it is an electric company. I added geometric shapes in the corners diagonal to each other for visual interest and included the plug from the logo on the back. I am not too thrilled with how this turned out because I think it's boring and sloppy, but it works as a letter head.

Business Card

Business cards have the same contact information as a letter head. I wanted to continue the theme of the lightning and gray background. I also put the plug on the back just like i did on the letter head. In the lightning bolt, I put what the company does. I like the way my business card turned out, but I still think it has room for improvement.

Envelope

Unlike the other two creations, the envelope does not require the contact information because that is written in the empty space. I left space in the center of the envelope for this very reason, but I still included cool graphics, being the lightning bolts. I strayed away from the gray theme I had going on because I thought that the white would pop more. I made the back yellow and continued it over to the flap to make it cohesive and have the front be more visually appealing. I also have my logo at the bottom. I really like how the envelope turned out because it is balanced and eye catching.

Time Management

I always used my time efficiently during class. I didn't wan to get behind, and, of course, I was excited to create stuff in Graphic  Design, so I wasn't going to slack off. When I finished early, I completed extra credit in Adobe Illustrator. An example of which is one of my favorite quotes (to the right). Outside of class, I was constantly looking at posters, commercials, logos, etc... to evaluate the graphic design elements.

Strengths and weaknesses

As a graphic designer, I really evaluate the meaning of the assignment. I look into the different form of psychology: color, fonts, etc... and I evaluate a message. For example, in the rebrand project, I made the abbreviation of All Current Electric into a plug to represent their electric company. However, I need to work on making my work look more professional and  learning more areas of Adobe Illustrator and Photoshop. 

I had a lot of fun this semester, and I really expanded upon my graphic design abilities. I wouldn't change anything about how this semester went because it went so well. I learned a great deal about color, type, shapes, how to use different tools in illustrator, the process of design, and much more. I am not taking graphic design next year, but I did enjoy learning about everything in it. 

Company Rebrand

All Current Electric's current logo

For our last project of the year in web design, we were to rebrand a local company that we thought needed a facelift. I didn't know which company to upgrade until I remembered that my aunt and uncle own a business here in Lenexa called All Current Electric. They provide electric service and repair. I went to their website and was taken back by their logo- and not in a good way. This is what their logo looks like right now- the same as it has for the 20 years that they have been a company. I knew that this would be a challenge, but I knew that I was up for it.

First, we sketched over 30 logos and combination marks and then chose our 6 strongest. When designing my logos, I tried to incorporate graphics that reminded me of electricity. I included plugs, outlets, and lightening bolts. I did this all in black and white to start. We presented these to the class to get feedback and altered aspects from the feedback.

Next, it was on to color. I looked into color psychology to create the perfect color scheme. I incorporated many color schemes including complementary, secondary, triad, and analagous. These are a few of them. I like the way the colors enhanced the logos. Then it was the hard part: choosing the logo to use for the rebranding.

This is the color combination I went with. I chose this color scheme because I like how the yellow represents electricity and how the black is a nice and cool contrast to it. In addition, I liked the idea of the hidden image/ message. The line through the 'A' and the 'C' and 'E' create a plug. This is an electric company, so I think this is a cool effect.

Once I had my logo in mind, I was assigned to make an envelope, letterhead, and business card. Each was supposed to be clean and represent our company. I knew that I wanted to incorporate lightning into my designs. For my letterhead, I created interesting geometric shapes in the corner to represent lightning. I supplemented this with a made up name, address, and phone number, which  I put in the upper right and my logo in the left. On the back I used the plug from my logo and made lightning come out of it.

As for my business card, I simply put my logo on the back, and on the front, I used the similar plug idea as in the letterhead. I also put the business information on it on the right hand side. For both the letter head and business card, I used the same gray background because it was a good median between black and white.

The envelope does not follow the gray theme, but instead has a bright yellow and white because I think it's more eye-catching. I used the yellow from the back on the flap of the envelope to make it cohesive. I continued the lightning theme by using white lightning bolts to balance with the white on the front. I put the logo in the lower left and designated space for writing.

Overall, I enjoyed this project. There was a lot of making different logos and color schemes which required patience and time, but it was worth it because I am very happy with how it all turned out.

Olathe Northwest SQUIRRELS

If Olathe Northwest changed their logo from ravens to something else, I would want it to be the squirrels. This is because squirrels are terrific. First of all, they are incredibly adorable, but beneath their cute appearance, they are vicious, deadly critters. They are swift, competitive, and intimidating creatures. These are all components of a good mascot.

The creation of my squirrel mascot is going decently so far. I wanted to make the squirrel look cute as well as vicious. I achieved this by using the pen tool in adobe illustrator to vector a clipart image of a squirrel. After doing this, I created the body and tail. I made the tail protrude form the back of the squirrel. Next, I found a swirly font that I thought would work well as a school font. I typed Northwest squirrels on and above the tail.

with words

just icon

Now it's time for color! I wanted my color scheme to look clean and look well together, so I chose a complimentary color scheme of orange and blue. I think this color scheme looks very good.

colored squirrel head

colored squirrel with words

Now that I had the squirrel, it was time to make the actual website. We just made the home page with a bunch of fake links. I incorporated the orange and blue color scheme togo with the colors of the mascot. I used a web template, so it was very easy. All I had to do was put in the content. Because it is a template, it came with responsive design. There is a cool image that moves as you scroll. This image disappears when the screen size is a certain size. This is how it turned out:

Check it out here.

Updated Index Page

We thought that our web index pages that displayed our web work needed a facelift. To redo my index page, I used a web template provided my Dream Weaver. This template looked very professional, clean, and was complete. All I had to do was insert all of my content and create a color scheme. This made creating a website much faster and look much more professional.

This is what my web index page looked like before the makeover. I designed it by myself (with out a web template). I liked the color scheme that I had before, so I tried to incorporate a similar one in my new index page.









This is what my updated index page looks like. It has a similar color scheme as my old index page, but I did not set a photo as the background in the new one. A big difference is the layout. Each website displayed is inside a thumbnail. In addition, each website has a short description of what the website is about. To check out the website, instead of clicking on a boring text link, a screen shot of the website is the link. Another different in the new index page is the "Email" button at the bottom that allows someone to click it and it takes the person directly to my email.

 The web template has responsive design incorporated into it. This made it extremely simple to have a website that would look good at any device size. This is how the layout was spaced out on a cell phone. Something I like about it is how each thumbnail occupies the whole screen as seen to the right. This looks very clean and makes content simple to read. This is what my index page looks like on an iPhone 5.





Creating a website from a template is very beneficial. It is much faster, easier, professional looking, and versatile. However, it isn't guaranteed that the website will be perfect. For example, the layout had a problem at a certain screen size that jumbled up the thumbnails. I couldn't figure out how to completely fix this. In addition, following a web template guarantees that there is another website that looks very similar. This is bad because originality is important, and it's boring for many people to have the same website. However, you can always change the CSS and HTML to personalize it.

I doubt that many web designers create websites completely from scratch because it is much more efficient to adjust certain aspects rather than starting everything from scratch.

Check out my new index page here.

Past Present Future Website

In web design, we made a website that is totally different than any we have ever made before. It is a website, but it has a div that looks like a cool TV and animated text. This was an animated layout that we created in Photoshop. When I saw what the website was going to look like, I thought that it looked really complex, and I didn't think that I could pull it off, but it was actually quite simple.

original

original layers

First, we created the layout in Photoshop. I wanted mine to have a cool galaxy background because when I think of time travelling, I think of outerspace. I, next, typed out my name in a big font and gave it a shadow. I wish I had chosen a cooler font. I did the same with the words Past, Present, and Future. I also added the big "screen" in the middle that would depict my information. I rounded the edges and gave it an outerglow to make it stand out. Next, it was on to animating it. In the layers panel I made two rendeitions of the words. One that would be the original, and the other, the one that changed when hovered upon. Next we animated the layers to fade in and out in the time line. Lastly, we made slices of each word and saved the starting one, and the animated one.

changed 

the slices

changed layers

Then it was on to Dream Weaver. I struggled getting my slices on to Dream Weaver. I inserted a roll over image inside a div. This is where I put all of my slices; first the original and then the animated. I then  made an inner-bottom div, which is where I typed in my information for past, present, and future. I also included pictures. I then entered in the code to make a scroll bar. I changed the CSS to make the scroll bar purple to match my color scheme. I learned that I had to work almost entirely from live view because it didn't show up at all how it really looked in design view. I made four different pages in all and linked them all to one another (linking images works the same way as linking text). I am very happy with how my website turned out, and I'm surprised I actually made it work.

Check it out my website here.

Logos

Logos are used for many different purposes. As a result, there are many different types of logos, but all of these logos- as long as they are good- have commonalities. Good logo design follows a few rules. Logos should be easily recognizable, remembered, and recalled. They should be simple and unique in a way that represents the company or goal that it is for. Logos should be portrayed to the intended audience. If a company is for kids' toys, it wouldn't be a goof idea for a company to use harsh, dark colors and jagged lines, or a child might be scared away. A good idea would be to use warm, welcoming colors with rounded edges or even circles. These are good pointers to keep in mind when designing or observing logos. Now lets explore the different types of logos.

The different types of marks

hp is a lettermark

Lettermark:

letters that are shortened from a long name or word or are abbreviated. 

Target is a symbol

Symbols:

a mark without type. Symbols are simple, unique, and should be easily recognizable. 

Cocacola is a logo

Logo:

word or words in type.

Nike is a combination mark

Combination Marks

symbols and logos used together. Nike is an example.

Interesting Facts

Closed Gestalt:

A symbol with an internal vocal point seems safe and inclosed, while a logo that has many different lines going in every direction, is unsettling (this is called open gestalt). 

One Color:

Symbols should be designed to look good in a single color. Colors can enhance a symbol, but they should not be completely depended upon. Sticking to no more than two or three colors is a safe way to go.

Direction:

The idea that the direction of a symbol pointing upward or to the right indicates positivity and moving forward, while direction pointing downward or to the left indicates negativity or moving backwards. It is important to try to stay away from downward and left pointing directions.