Extreme Homepage Makeover - Final Product

Noble High School

Valve

Noble High School Logo Redesign

Noble High School Redesign

Here is the final product of the Extreme Homepage Makeover project I introduced in the last blog post. The first site was the school site we were tasked to redesign; in this case, Noble High School. The second is Valve Software's homepage, which I used as the company website we were going to emulate. The final product - the logo design and homepage redesign - is my own creation, a combination of the content from the school site and the design of the company page. Along the way, the most challenging part of the project was the emulation itself - finding the fonts, images, etc. that make up the original company design. I learned about image-based design as well, combining both images and positioned text to create the design which Valve used.

Extreme Makeover: Homepage Edition

Today in class, we were given the Extreme Makeover: Homepage Edition project, being asked to redesign a high school website in the style of a professional business website of our choice. For my project, I will be doing an Extreme Makeover on the Noble High School website based on the website of software company Valve. The project is a two-part project involving logo design and creating a functional demo of the school homepage.

Noble High School

Valve

Parallax in Web Design

Parallax web design is an increasingly popular trend in the modern web world. The term "parallax" actually refers to a technique in side-scrolling 2D animation, especially in retro video games, where the background image would move slower than the foreground, giving the illusion that the background is further away. It serves a similar purpose in web design, where the background of a website moves slower than the rest of the page, creating an impressive visual effect and a sense of depth.

Here are two good example websites that use parallax:

Nodo

Soleil Noir 2012

To create a parallax site, you'll need to know how to use JavaScript and jQuery, as well as the usual HTML, CSS, and a little bit of CSS3. You will also like to have some high-resolution images to use for the background.

There are a few issues with using parallax in a website, though. Its biggest issue is that most parallax websites are one long page. Having only one page means that each website can only have one set of meta information and one URL, which is detrimental to the site's SEO. A long parallax site also has issues with load times, owing to the large number of images and content that needs to load. Parallax sites also aren't compatible with most responsive and mobile designs.

Senior Project - Week 4

This is the fourth and final week of my quarter 3 senior project. After finishing adding colors last work, I did some reorganization and bookkeeping with the blog and project requirements, and then started work on the final touches on my artwork. Over the last few days, I've added lighting, shadows, and backgrounds in order to complete what I've worked on for 3rd quarter.

Final product of my quarter 3 senior project.

It has certainly been an interesting learning experience working on this project. It's my first large Illustrator project that I've done independently, at least for vector art like this. I've learned how to accurately use the pen tool for various effects, how to use perspective effectively, and also how to color and shade line art in Illustrator rather than Photoshop. Other soft skills I've picked up along the way are being able to utilize feedback, knowing how to work under time constraints, and learned a bit about working artistically in general. Overall, I feel like this project has helped me improve in several ways, and I'm quite satisfied with the way it all went.

Senior Project - Week 3

Week three of my senior project. Last week, I finished adding the details to the line art and cleaned it up to prepare it for the coloring stage. Through week three, I developed a method for coloring the line art and added color to the entire shape, tweaking colors and cleaning lines as needed.

This week went extremely well in terms of how much got done, due most in part to my work on learning the live paint bucket tool in Illustrator, cutting my work down to a fraction of the time it would've taken with the blob brush.

The finished product of week three.

Learning about the different methods of coloring line art has helped further develop my Illustrator skills. Feedback also continues to be important in pointing out things to be improved and ways to work more efficiently, like figuring out how to use the live paint bucket. To sum it up, it's important to work smarter not work harder, although both are important.

Senior Project - Week 2

This is week two of my senior project, where I had previously finished a basic draft of my lines on a digital painting and compiled some inspiration for my logo. This week, I've got my final line art complete and will be starting flat colors on the vector art. I've decided to stick with the vector art portion of my project over the logo, since it will let me spend more time on quality artwork rather than rushing to balance it with my other classes. Below is the result of another week of cleaning and adding detail.

I've spent a lot more time with Illustrator, learning more about layers, the pen tool, perspective, and more. It's definitely been a challenge to keep things in perspective, but I think it'll help me down the road when it comes to designing perspective artwork. Getting feedback from others is extremely helpful and helps me pinpoint what might be off about this part or that part and allows me to see what looks better, especially when I'm focused on one detail and might not see the next.

Senior Project - Week 1

Last week, we started work on a senior project of our choice, during which we'll document our work weekly throughout third quarter of the school year. My project involves creating a piece of vector art out of a digital painting and also designing a logo for a local gaming group.

The first part of my project, the vector art, is based off the above image found on DeviantArt (johnsonting.deviantart.com). I decided to draw the guy on the right. So far, I've gotten down some rough lines to provide a base for the rest of my work. This next week, I'll be cleaning up the lines and adding more details, so stay tuned.

Next, I set down some guidelines for what I want in my logo, taking cues from the group's current logo. I wanted to keep the same skull and wings style of the previous logo, while making it fit with the Roman/Latin-style text on their website. As such, the logo will probably be serious and intimidating, but I might maintain the smirk on the skull to give it some attitude. I also assembled some images of other logos I can use for inspiration, borrowing heavily from the gothic sci-fi designs of the Warhammer 40,000 war game.