Home

Screen Shot 2013-01-14 at 20.40.56After lots of research, trial and error and inspiration I have finally produced the final magazine inspired design, in this blog post I will take about the design, technical considerations and justify all my choices, I will run down the website and discues each part, firstly the header:

Screen Shot 2013-01-14 at 20.56.46Unlike the rest of the website which is percentage width’s because of what was on the header, I decided to us an adaptive design on the header, using media queries when the screen reaches a different size the header bar will adapt, there is three of these for all different screen resolutions/devises.

To keep with the magazine theme which I took upon, a magazine always has a front cover, something visually exciting, I wanted to give my website this, something visually exiting and at the same time fits in with my social network magazine style theme, I came up with a cover, the cover is the large purple area which is JQuery customised plugin which is responsive and an ever-changing image design at the top of the page to welcome you to the site, it’s visually existing and ever-changing which is exactly what I wanted to achieve.

Screen Shot 2013-01-14 at 21.06.48Next up to design was the sidebar, I wanted this to be like the contents page of a magazine, but I wanted it to be visually exciting and something which is fun/easy to look at and what I achieved I think it exactly what I had in mind, to start with there is a large top to the header, which is the profile image to the user who would be logged in, under that is the social links which on the website would allow you to filter your social stream, keeping inline with my social theme from my mid-point presentation, this is also adaptive using media queries and the CSS :after rule the text after the number changes depending on your screen size.

Screen Shot 2013-01-14 at 21.07.34

Next up was some social integration to complete the sidebar, so I put in a simple broadcast box for you to (if it was a real website) update your status on all your social networks, and then beneath this what images you’ve been tagged in recently, the whole of the main content on the website is also using percentage as width’s so as you resize the window/different screen sizes the content will reduce to fit your screen, with the CSS :after rule I think creates an easy to view website.

Screen Shot 2013-01-14 at 21.16.22I then wanted to create the content which would be in the magazine and becasue the content of a magazine can be many different things I tried to do this, I did this in a newsfeed type style, keeping in with the sidebar design, you know what content this is from, the colour of the line on the post (a few of the embeds I used such as Spotify don’t respond well to screen size, but I kept them there for design/example purposes), again with the percentage width’s for a responsive site, along with media queries it creates a nice feel website.

Screen Shot 2013-01-14 at 21.19.40

On the sidebar there is some spaces for what would be advertisement  which are also responsive. For the footer, I decided that a magazine is a never ending thing pages of content to discover, so I decided not to use a footer, but to show an example of what would happen on the real site when you reach the bottom, it would loads more content/text/posts for you to discover.

Screen Shot 2013-01-14 at 21.31.26I got feedback from friends at family at multiple points throughout the making of the site, and removed stuff as I went (such as the slide out menu in a previous post, which after asking people to test out was too slow), on the mobile website I could have also styled the content more to give it a better look, but I decided to let it repsond gracefully, so that you get to see the video/images at the best size which is what you want on a mobile browser.

I also used the target ÷ context = result within the website to give the best responsiveness, I have tested the website on Apple browsers and Windows/Mac browsers, but not had a chance/availability to test it out on Android browsers, so I’m, unsure of what the result will be, the website is also HTML Valid (except for the YouTube embed).

To summarise my website and how I have worked I think with more time I would have improved the stream look further enhance the responsiveness of the website, I tried to also link back to the magazine theme and social theme as set out in my mid-presentton, but I think with more time I could have further met this requirement  but believe what I produced does reflect the brief. I I think the website was successful though and I have learnt many things which I will continue to use in my work from this point on.

The final parts of the site which are handed in are, there could have been many but I believe I showed a good example of my work in these 2 pages:
http://127.0.0.1/pluddle/index.html – main page with feed
http://127.0.0.1/pluddle/about-us.html – this would be a simple page example

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