MDDN352: Mobile Media Project 1

0 Comments
According to the project one brief and class discussion, we are to create a single page, long-form website based on food, shelter or clothing. From what I understand, we are to find an existing website and transfer the information in a website we have designed that works on mobile, tablet and computer devices successfully.

"Research and define parameters for all three devices of your choice, and determine the most appropriate technologies (CSS frameworks, HTML standards, Javascript libraries, etc) for them. Prioritize your devices; for example is it more important to design for a tablet or a mobile first? Consider the limits and opportunities of each interface, and how you can communicate a consistent message across all three devices. You are allowed to be browser-specific, but a non- functional site on any browser is not ideal."
Hand-in requirements

  •   Individual progress documentation
  •   Development sketches/concepts
  •   Final website hosted online
  •   Development projects / code tests
  •   Small series of interaction and integration experiments (integration with NWEN is worth 2%)
  •   Each version of the website (the mobile layout, tablet layout and desktop layout) (23%) 

Step 1.
      Start researching/designing your concept
      What are some appropriate questions?

Step 2.1.
      Start researching html/css frameworks.

Step 2.2.
      Research your three devices.

Step 3.
      Start drawing.
      Use the frameworks are a guide.
      How does the same content scale?

Step 1.

I would like to create a website about clothing. To me this is the most interesting topic and to me interesting is always the best option. There are many boutique stores in and around Wellington, and I would like to create an information long-form page on one of these stores. However, I do not want to include an online shop, as so many of the boutiques now have.

Who: A Wellington based clothing boutique. Not exactly sure which one as of yet. To be decided on in the near future. I would be keen to transcribe the Missy's Room Facebook page into a single long-form website. However, I don't know if they have enough content and brand work to be able to re-appropriate the information.

There is a second hand clothing store in Thorndon called Secondo who have a very simple 5 page website that details what they are about and what they do. They have a style and have developed their brand enough that I could easily transcribe and re-appropriate the information without changing too much of their 'brand'.

What: Create a single long-form page detailing the business, what they are about and as advertisement to sell items from their shop. I would be interested in creating a story about how the boutique came to be and developing a personalty

Why: I would like to create advertisement for the brand/store. Instead of creating an online shop, I would like to create advertisement to encourage people to visit this one of a kind boutique, where the emphasis is on individual pieces.

How: Creating a story of the brand/store and what they stand for. How they came to be a Wellington boutique and what they aim to do for the Wellington community. It would be interesting to include a look book of some sort while sharing this information.

Step 2.1.

Researching HTML frameworks can be a fun and interesting thing. I have used frameworks in the past and they are really good as a starting position to create and modify your website.

https://html5boilerplate.com
http://www.1140px.com
http://neat.bourbon.io/examples/
http://www.profoundgrid.com

http://gumbyframework.com
http://www.columnal.com
http://getbootstrap.com
http://getskeleton.com

Step 2.2.

The three devices that I will be designing for have been decided by lecturer Kah Chan. 

For mobile we will be designing for the size and resolution of the iPhone 5s
640 x 1136 resolution at 326 ppi
Aspect ratio 16.9

For tablet we will be designing for the size and resolution of iPad 3.
1536 x 2048 resolution at 264 ppi
Aspect ratio 4:3

For computer we will be designing for the size and resolution of a screen larger than 1920px.
1920 x 1080 resolution at

2560 x 1440 resolution at

Retina display iMac is 5120 x 2880

Step 3.

Start Drawing.


About Post Author

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

You may also like

No comments:

Powered by Blogger.

About

I am a designer, currently studying Design Innovation at Victoria University of Wellington. My focus areas are website and mobile media development, interaction design, 3D modelling and animation and audio-visual space. My blog shows my journey through each project as well as my learning experience through university. What do I want to be when I grow up? I have no idea. But I love what I'm learning. Although there have been many bumps along the road in this journey and despite the fact that there are going to be many more, I wouldn't have it any other way.

Labels