Skip to content
September 15, 2009 / Kuan

Mock-up Website Design: course website for Astronomy

For a class project, Interactive Communication Core 565, offered by Newhouse. We are asked to redesign a site that sucks, only mock-ups. No real html, css or coding.

Here is the original site.

Luo_screenshot

Here are one homepage and one inner page mock-ups:

Luo_Final_home

This is the homepage. I added more elements to the original site, including pictures of the day, announcement, homework, useful links and tonight’s sky. What I try to achieve here is to deliver more information on the page without making the page look too busy. Thinking as a user of the site, I added the information I most wanted to know, like homework and announcement. In order to make the page look more fun and educational, rather than just a digital blackboard, I made the box for Tonight’s Sky. It will switch to other pull-out boxes that are interesting and fun to look at.

The typography here I chose Minion Web Pro and the sans-serif is Helvetica Lt Std. Minion gives the site a serious look, but it also has nice terminals and curves that makes it look elegant and mysterious. Helvetica is really easy to read on the screen even in a smaller font size.

Luo_Final_contact

This is the “contact” page for the website. It’s really basic, keeping the frame from the homepage. I made the buttons for the contacts and changed the content of the button bar. I am thinking of the button bar as more like flash, it will switch contents in a few seconds. And now, it changes to “Do you know?” section.

There are so many details involved in designing websites, like roll-over effects and button sizes, etc. And the details are what makes the website pop. These mock-ups are my first attempts. Keep it going!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: