Sharnia King Design: March 2015

MDDN352: Mobile Media Project 1 - Boutique

The goal of this project was to create a unique website that can be used on desktop, tablet and mobile devices. We had to choose a theme from food, shelter or clothing and tailer the topic to suit our interests.

I chose the topic of clothing and decided to create a website that was an informative guide to the second hand boutique stores in Wellington central. I began with four stores as a starting point, with the potential to add more stores later on and build up a good level of information for users interested in the scene. The chosen stores that gave me permission to use their content and include them in this project were: Missy's Room, Emporium, Paper Bag Princess and Honour.

Boutique can be accessed through the page http://boutique.divshot.io and can be used on mobile, tablet and desktop devices. Each of the viewing platforms are slightly different, as they are catered to how users use each of the devices. The desktop version is mainly static, but has a good level of detail and all the information and pictures can be viewed easily. The tablet and mobile version integrate touch and device tilting interactions. These use a tilt scroll to view the information as these are long form webpages. The tilt scroll acts to make the scrolling easier, but swiping the page can also be used as well.

The design of the website has been tailored to incorporate the vintage style that many of the Boutique stores of the Vintage Quarter on Cuba St feature. Background images and fonts use vintage style patterns and typography. The layout of the content also uses a centered style which is quite a common feature of vintage styled designs.

After the interim presentation this morning where I received feedback on my work so far, I have made some decisions about the direction this project is going.

My wish for this site is to create an informative guide to the second hand boutique stores around Wellington, with particular focus on the Cuba Street area. I would like to creative a narrative about the history of fashion in Wellington and also mention some of the fashion events held annually.

I want to focus on four stores in particular, some of them are well known, others are fairly new. The four I would like to focus on are Missy's Room, Paper Bag Princess, Emporium Vintage Boutique and Honour. I have been emailing these stores and have gained permission from each of them to include them in this website.

I have also gotten quite a bit of information directly from them, but I am hoping to get more in order to create a content-rich site. I also emailed several other stores to see if I could use them too, just in case some of them declined or didn't respond to my messages.

My aim is to go into each of these stores and take images of their products and their setups. I want to portray the feeling of each store in their own section of my website with the use of images and rich content.

My aim for the future of this website is to include more stores as vintage and second hand boutiques are becoming increasingly popular. I am looking forward to seeing the end result come together.

Presentation slides for Project One interim

Artist: Jenny Holzer, American conceptual artist.

Biography:
"For more than thirty years, Jenny Holzer has presented her astringent ideas, arguments, and sorrows in public places and international exhibitions, including 7 World Trade Centre, the Reichstag, the Venice Biennale, the Guggenheim Museums in New York and Bilbao, and the Whitney Museum of American Art."

"Her medium, where formulated as a T-shirt, as a plaque, or as an LED sign, is writing, and the public dimension is integral to the delivery of her work."

"Starting in the 1970's with the New York City posters, and up to her recent light projections on landscape and architecture, her practice has rivalled ignorance and violence with humour, kindness, and moral courage."

"Holler received the Leone door at the Venice Biennale in 1990 and the Crystal Award from the World Economic Forum in 1996. She holds honorary degrees from Ohio University, Williams College, the Rhode Island School of Design, The New School, and Smith College. She received the Barnard Medal of Distinction in 2011. Holler lives and works in New York."

http://projects.jennyholzer.com

Working in partnership with Keely Meechan.

The 'truisms' that Jenny Holzer uses in her protectoral work are very inspiring. Not only what they say, but what she means and how she has gone about designing these truism projections.

Florence, 1996

Buenos Aires, 2000

Today was a practical exercise where we worked together with people from the Networking faculty to load an HTML file onto a mobile emulator system. Therefore website would show up as what it looks like on a mobile platform.

This was my first contact with creating websites/apps for mobile before. I was nervous and unsure of what to expect, but it worked out well and I've got a great partner to work with.

I don't really know how to explain what we did. So I'm not going to.

But this is the end result of the mobile site we made today. It looks awful, and is basically made from a template, but we got it on a mobile size screen, which is all that really matters.

Sketching is a very useful skill that can come in handy for visualising how websites are going to work and fit together.

I have been instructed to transcribe the layouts of several websites on to paper. Although my sketching skills are a work in progress I have been practicing. Sketching out these websites was very interesting, as each website has its own clear grid format. Although the grids are not the same shape throughout the site, patterns were followed which are easily identifiable.

http://www.colly.com

http://www.whatkatieate.com

http://trendland.com/?s=alison+anselot

Lily Pebbles
http://www.lilypebbles.co.uk/#Yg2F9YgFgESSZpTr.97

I have found surprising inspiration in a blogger who has recently redesigned their website. I have heard of her before but never really taken an interest before now, mainly because of the lack of time. One of my friends mention to me this morning about how Lily Pebbles redesigned her blog and how much better it looks than her previous one.

Her blog is simple, elegant, well organised and content rich. Her photos are high quality and her blog posts are well written. The style of the blog is consistent throughout the site and is aesthetically pleasing as well as easy to use.

I occasionally read blogs and follow a few people, but I have never been this impressed by the design of a blog, at first glance as I did with Lily Pebbles. There are many different pages, but they are all organised well and I found that the blog has 'sections'. Each section focuses on a different topic such as beauty, places, lifestyle etc.

For my MDDN352:Project 1, I would love to create a long-form page that is as simple, elegant and well organised as this. The simple layout is easy to navigate but also aesthetically and ergonomically pleasing because of how easy it is to use and read.

UX (User Experience) Sketching

Sketching is a valuable skill in order to work through problems and create successful designs. Designing on the computer proves useful, but all too often we get stuck on small details and focus on getting things perfect. This can affect the progress of the overall design and make it hard to visually work on the details.

I have done some very rough sketches of several interesting websites that all have different styles.

These include:

http://www.colly.com

http://www.whatkatieate.com

http://trendland.com/?s=alison+anselot

http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek

https://storyform.co/demo/rainier

At this stage these are only rough sketches to test out what it is like to draw the basis of a website from what I can see. I will be doing more of these drawings with finer details to better understand how these websites are set out from only what I can see. This will help me to figure out what I want in a framework and how I can modify frameworks to the grid configurations I would like.

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.

Reading: Interaction Design Rant - Bret Victor

A brief Rant on the Future of Interaction Design

http://worrydream.com/#!/ABriefRantOnTheFutureOfInteractionDesign

The status quo sets the standard of what is normal and what is new. Hedonistic adaptation is a new idea where humans become excited by something new and one we get used to it, our happiness level changes, therefore the status quo changes what is now normal.

The video featured in this reading focuses on a vision of future technology that is basically advanced 'picture-under-glass'. The devices we currently use are already considered picture-under-glass gadgets that are graphically and electronically designed to look good.

iPhones, tablets and computers are designed as tools to help us complete tasks. 'A tool addresses human needs by amplifying human capabilities. That is, a tool converts what we can do into what we want to do. A great tool is designed to fit both sides.'

Picture-under-glass tools require the use of touch. It is intuitive to touch and we learn so much by touching because we are able to feel and manipulate objects. However, touching pictures requires our eyes to know what do touch. If we had to use an iPhone with eyes close, could we successfully complete tasks? How would we know how finger was pressing the button if there is no response felt. We can only guess.

Almost every object in the world provides feedback to an action that can be felt. It is usually so minimal that it is not even noticed, but we feel it and accept it. Pressing a button on my keyboard gives me feedback in the form on stopping movement when the button touch a hard surface. I then instinctively know the pushing the button has executed the task that I wanted to achieve. 'The sense of touch is essential to everything that humans have called 'work' for millions of years'.

Picture-under-glass devices do not do this. Developing technology that is not intuitive is not helping society. It is going against human capabilities and is therefore not an effective tool. We want to focuses on creating tools that are going to help benefit human capabilities with new ideas and new technology.

Thinking about the small things, such as the movement of fingertips and the responses objects give off helps to break down ideas. All these little things can be incorporated to help make new technologies successful. Instead of pushing society to change, making new technology as intuitive as possible will create successful devices because they work with human capabilities.

Reading: Minority Report

How 'Minority Report' Trapped Us In A World Of Bad Interfaces - Christian Brown
http://www.theawl.com/2013/02/how-minority-report-trapped-us-in-a-world-of-bad-interfaces

The movie Minority Report set some high standards for futuristic interfaces and gesture related movement. This article by Christian Brown explains the standards set by Steven Spielberg's idea of the future based on present technology.

In the past, we have built graphics and electronics around interface 'eye candy' instead of creating new and more effective ways of controlling gadgets. The technology we use today has been around for decades and touchscreen are no longer considered new technology. It's time to start thinking creatively and beginning creating things from scratch instead of ideas for futuristic movies.

The most influential idea from futuristic movies, is gesture controlled interfaces. The motion of the kinetic movement is enough to control the technology. At the moment, society is using what can be referred to as 'picture-under-glass'. These are basically fancy pictures that sit under glass and look really good, but do not work that well. For example, we have to be looking at what we are doing to create effective movements that work. These movements are not intuitive and require focus and concentrate to work effectively.

If gesture controlled technology were to become integrated in everyday life, this would be even less intuitive because there is virtually no touch involved. The gesture system is similar to conducting an orchestra, in that many hand movements are involved that are less intuitive and have a special meaning.

Futuristic movies such as Minority Report have set some really high standards from the customers point of view. But these standards have been created from technology we already have. The ideas are not new, they are just a different, less efficient and less intuitive way of completing work.

Society needs to change the standard and start thinking of new ideas based on new technology. Not gadgets and devices that have been around for thirty years. Start playing with virtual reality. Change the face of technology and start being innovative. No idea is stupid, that is how we progress as a society and give the world something new.

http://www.jamaicaobserver.com

http://benfry.com

MDDN352: Mobile Media.

Technology comes in all shapes and sizes these days. There are three main technology devices that most people have these days, the desktop/laptop, the tablet and the mobile device. Being so common these days, web pages now need to be designed with these three viewing platforms and their various sizes in mind. And this is what mobile media is all about.

In the first lecture today, project one was introduced.

Design a long-form website that works and looks good on all three devices.

Looking at the history of technology, smartphones and tablets as well as computers are old. They have been around for longer than we have known as prototypes and test models, while technology advanced and marketing happened. However, the things that these devices can do are constantly increasing. They basically have everything we need all built into one device. Clock, phone, mp3 player, calculator, GPS, PDA and game player. The number of invisible inputs is also increasing as technology develops. These include touch, camera, microphone, compass, light sensor, thermometer, bluetooth connectivity, wifi, audio jack and volume buttons.

As the amount of things we can do on our devices increases, why not increase the amount of things an interface can do. Futuristic technology as seen in movies such as Minority Report and Iron Man show gesture based interfaces that react to kinetic movement. It is now stuck in the minds of people, that this is what we are heading to, when in reality we already have things like this.

At the moment we are in the age of Picture Under Glass. It is common to interact with pictures under glass, but is it effective ? Is it productive ? Is it futuristic ? Not really. We are just stuck and need to start thinking outside the box, instead of looking at technology in futuristic movies.

In this course I aim to learn about new technological interfaces. I want to be able to design effectively for different devices. I want to incorporate mobile technology that I have previously not used. I want to learn. I want to try.

I want to be here.

Sharnia King Design

Step 1.

Step 2.1.

Step 2.2.

Step 3.

About

Labels

Blog Archive