NRD: Web Design Phase 1

Assignment:

“The type of site is a hybrid news/blog/magazine site, sometimes called a ‘Blogazine’. Each project needs to have a lot of news and content, as well as some form of advertising. Additional requirements:  Responsive Images, Responsive jQuery slideshow and/or Video, Embedded fonts from Fontsquirell.com, needs to be under 300k, needs to work on IE8, all modern browsers, phones and tablets.  You should surf the web to find similar sites to see what is relevant. Choose one from below:

Geekbot.com is a digital culture magazine for the gamer/techie/maker/cosplay crowd. It has a lot of user generated content, social media integration and the latest news and information for the digital lifestyle. Its tone is hip, urban, youthful and irreverent. The demographic is young, affluent, sophisticated. The typical user owns a smart phone, a tablet, a gaming console and a laptop and is fluent in social media. See http://www.gameinformer.com/

Phase 1 of Web Design

1. structure information with user-centered considerations (Site Map) *Research the competitors (Links) and content (html)


unstyled html for NRD website

NRD
Version 1 of sitemap for NRD


Joystiq.
Kotaku, the Gamer’s Guide.
The Escapist.
Home – www.GameInformer.com.

2. communicate style and function Branding: I’ve invented the new brand called “NRD” and designed their logo as pictured below.

NRD style tile

3.wire-framing explore more efficient layouts (Don’t forget Advertisements!)

4. understand mobile strategy and other media requirements Client wants 3 layouts– mobile, tablet (landscape), and desktop *my audience is a bunch of computer nerds so let’s make that, widerscreen. Responsive Images, Responsive jQuery slideshow and/or Video, Embedded fonts from Fontsquirell.com, needs to be under 300k, needs to work on IE8, all modern browsers, phones and tablets. 20-30 good pictures in the image library and at least the initial paragraph for 12-15 feature stories on the front page.

3 layouts responsive

Advertisement

One comment

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 )

Connecting to %s