House Of Horrors : A responsive web design

Hi there.
This post is to share my experience and work under getting started with ‘Responsive web design‘.
I created a website under the theme of House Of Horrors, and I am not even leaving my desk and posting this right away.
Any suggestions are more then welcome!.As it was a project under ‘Responsive Web design’, so firstly what i did was, i created 3 wire frames of the website as high resolution, medium resolution and low resolution.High resolution layout will target the devices having more then 1024 px width.
Medium resolution layout will target the devices having width between 481px to 1023 px.
Low resolution layout will target the devices having width lass then 481px.

High resolution wireframe

High resolution wire frame.
High resolution wire frame. for devices having greater then 1024 px width.

Medium resolution wire frame

Medium resolution wire frame.
Medium resolution wire frame for devices having width between 481px to 1024px.

Low resolution wire frame

Low resolution wire frame.
Low resolution wire frame for devices having width less then 481px..

When i was really satisfied with the wire frame i created, the next step was to make things little more alive in the photoshop.
Here are the snaps of the designs created in the photoshop.

High resolution design

High resolution design.
High resolution design created in photoshop targeting high resolution devices.

Medium resolution design

Medium resolution design.
Medium resolution design targeting tablets and phablets.

Medium resolution design targeting tablets and phablets.

Low resolution design

Low resolution design.
Low resolution design targeting hand held devices.

Phew! finally the task was done and i got that coded.

You can have a look at it.

House of horrors

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