Monday, April 28, 2014

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

Wednesday, April 9, 2014

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.