ishita mehra CD-A level 1
contents
4 6
introduction to web design, interface designe, web usability and information architecture
Project 1 comparing websites on the basis of web usability, interactivity. Re-designing a website by taking inspiration from the good website.
16 20
Project 2 group work. Creating a story and then designing a website on those lines.
Project 3 Choosing an interactive product or website, understanding it’s function and then creating a new website.
4
W
Web design is the planning and creation of websites which includes various elements like layout, colour, graphics, content, information architecture, user interface, site structure, navigation and so on. What binds these elements together is design. Design is a key part of every creative implementation. It creates unity by putting together its principles: balance, contrast, rhythm and elements: lines, shapes, texture, color, and direction. Design is the process of arranging those ideas, elements, principles and aesthetics and guiding those results towards a specific purpose. Web design is that process of creation. It intends to provide the user with a virtual experience that the users can access through the internet .
5
I
Information Architecture defines how we organize, structure and label content, how items relate to each other, how users perceive and look at information, and how one browses that information. Before starting the website, I soughted out the concept my design would have, and the information that would be showcased. Next step was information compilation and organization and how it would be put up. The challenge was that the way we (creators) view the information, should be perceived similarly by the viewers.
W
Web Usability, as the name suggests, aims to ease the use of a website. The goal is to present information clearly, and give the user clear choices and placement of options to browse through the information. During the making of the website, ideas tend to be more complicated than one thinks. Simplifying is the main basis for every information presentation. Advocating the KISS principle- ‘keep it simple, stupid’, helped me eliminate elements that were not needed or were insignificant. Web usability will be at its maximum when placement of information, and browsing is clear enough for any age group to use.
I
Interface Design deals with the process of developing a system to communicate and maximize user experience to make it simple and efficient.A good user interface finishes the task at hand and doesn’t draw unnecessary attention to the insignificant information. For example, Yahoo website diverts the user because of the the information around it, while Google enables the user to focus on what is required. Graphic design and typography enable the maker to create a good interface, and hence we make use of it by manipulating designs, so that the user can focus on what we want them to focus on.
R 6
PROJECT 1
To create a good website redesign, one would want to start afresh. However, there is a risk of losing useful elements. It’s better to perform a thorough site review before planning to change the existing site. Possibly the most important question of all- why are you redesigning? A site redesign should have a purpose - it’s not just an end in itself. It’s important to understand what it is you wish to accomplish. One needs to list out what does and doesn’t work currently in the website. Maybe your content is too boring, or the pages aren’t very user-friendly. Break your site down into its key components and then compare those with the goals you decided on in step one and the overall vision for your web site. If something doesn’t fit, it’s out. Along these same lines, one should see how users are currently interacting with the site and how you, as a creator want it to be like.
giselle for CHANEL, campaign 2015
RE-DESIGNING The assignment aims for us to understand how web-design works, the elements and contexts that make it user friendly and easy to navigate, and the balance and visual appeal created by the layouts
Comparing websites on the basis of design and user interface
WEBSITE
Redesigning Gucci homepage by taking inspiration from Chanel website
The assignment was to choose any two existing websites, one bad and one good. When we say a bad website we mean websites that are not very visually or aesthetically appealing and don’t have a good user interface. For the bad website, Gucci was chosen and Chanel was chosen under the good website category.
8
Website doesn’t stand upto the brand value.
Very basic layout, not quite visually appealing.
Not a very helpful guide area. This option leads you to a syllabus looking webpage where the viewer browses the topics in a theatre mode screen.
Colour scheme becomes dull and monotonous
9 Interesting pictures, but in a structured environment makes it look bland.
Browsing is a bit tedius because one has to open the sub topics in different tabs rather than opening one heading in a different page altogether.
The layout pulls down the strength of the products displayed.
Gucci has had a history of website design similar to the colour of Gucci’s logo. The brand stands out to be luxurious, glamorous, and all about visual outlook. The products are undoubtedly remarkable, and so are the lookbooks and fashion shoots, but the layout design of the website destroys what good the brand has. The colour scheme and basic structure is there for a reason, but the continuous usage of it has exhausted it.
10
Good photography, focusing on the product they want to sell.
Clear and minimalistic layout, neat and sophisticated. Easy navigation of options and other sub-topics.
Opens a seperate web-page which contains the history of chanel.
11
interesting browsing , can navigate the page like a touchscreen
well managed information outlets, gives space to browse.
watch behind the scenes of Chanel fashion shoot.
Informative as well as entertaining videos on Chanel.
12
Re-Designing Gucci webpage by choosing aspects from the good website. The aim was to keep a very simple website which is more focused in terms of its layouts, and compliments the products that the brand sells, with its brand concepts and values.
13
The aspect of structure and boxes was taken here to give a managed and easy look to the home page.
20
PROJECT 3
DELETING BORDERS Made in Ghent- 2013 Client- Amatorski Design- We work We play The band has always been fascinated by how the internet is deleting borders. This website is a result of a collaboration, bringing together music and visuals, in a mix of online and offline interaction. The website allows anyone to make their own track using their own images, and share their creation with the world. The content that is created online by people, makes a jump to the real world- which drives the live visuals for the concerts in Antwerp and Amsterdam.
Amatorski is a Belgian, post-rock band, created in 2008, which features blurry, melancholic music, which is often very narrative.
AMATORSKI
22
Content of the website is dependent highly on visuals- that the viewer provides, and music that the makers provide. They have instructions on top of the website, for guidance.
1
2
3
4
23
5
6
7
8
24
9
10
11
12
25
Thijs Bernolet Technology
Target Audience any age, preferably music enthusiasts. Client Brief to create a website that can allow anyone to create music on their own, along with a visual design. User Perception The website creates an artistic experience fro the viewer. It allows the user to combine sound and vision according to their own choice. Creates a platform for the user to try their hands on something they have never tried before. Strong visual communication, clean layouts which lets you finish the task at hand without any distractions, brief and crisp labels, which can be browsed on the same page through theatre mode. Use of good typography along with the visual imagery. The graphic elements make it more efficient and interesting.
WE WORK WE PLAY
Valentijn Kint Design
We work We play is a creative duo of techy Thijs Bernolet and designer Valentijn Kint who are originally fron Ghent, Belgium, but are currently based in San Fransisco, USA. The team collaborated with Amatorski for their project - ‘deleating borders’. The website was no easy task, and the challenge was worth the effort the team had put in. ‘What we had in mind had to be in sync with a background track so we were facing a serious challenge that would make the difference between a nice try and a surprising experience. We couldn’t find an HTML5 metronome on the web so we did what we had to do, rolled up our sleeves and made our own. The visua elements look interesting because of the triangles, that was a result of a fun canvas exploration. While experimenting Thijs came up with the idea to subdivide the triangles resulting in the visual language that defines the project. The idea was to make viewers learn along the way. We devised the instructions as a real person who is standing next to you to explain what to do next. There are no next or previous buttons or timers because the system checks if you do it right to move to the next step. This allows everyone to explore at their own pace. We believe steps like these are a much better solution than a static manual at the start of an interactive project. You should be able to dive right in and learn along the way.’
HEART
IS
A
DRUM
28
Beck Hansen known by the stage name Beck, is an American singer-songwriter, producer, and multi-instrumentalist. He rose to fame in the early 1990s with his lo-fi, sonically experimental style, and he became well known for creating musical collages of a wide range of styles. He has released 12 studio albums, as well as several non-album singles and a book of sheet music. His recent album ‘Morning Phase’ Album of the Year at the 57th Grammy Awards, 2015. The song ‘Heart is a drum’ from his recent album, was chosen for web-design. The idea is to take inspiration from the website chosen earlier, to create something on similar lines. While Amatorski was a highly artistic website, which allowed one to create music and visuals together, the same aspect would be chosen for my website, where people could combine a video and their thoughts or stories. The difference lies in the fact that Amatorski was a band related project, Heart is a Drum is just based on a song by a singer, and it aims to not only spread the message of the song but also helps viewers express their ideas or emotions. The album arts and video of the song would be used as it is, but the text will be generated by the viewers and if wanted, viewers can also upload their own short videos and link it with the song provided. The manner in which the text will flow in the video will remain standard for all.
You’ve lost your tongue when you fall from the pendulum. Your heart is a drum keeping time with everyone..
Heart is a drum loading page, showing Beck’s album art.
Content rolls up the video.
Button sllows you to start the video of the song
share UPLOAD VIDEO WRITE CONTENT
recall a memory of leaving a place or a person
CREATE
Giving options to the viewer Recalling a particular memory to create content and video.
sharing video on social media. The good ones will be chosen to combine a video for the song.
The viewer should be able to learn along the way, and so the layout with it’s options are formed in such a manner that it controls the way viewers navigate the website.
morning phase
morning phase
Page where they can see the album’s history, information or behind the scenes and other video uploads.
The video with it’s content will play when the website loads. Once the content is through, the viewers would be asked to think about a place or a person they have left or had to leave. The reason for this question is that the song talks about ove, life and memories of the past that still haunts the protagonist. The meaning of the song is linked in with the stories that the people will send it, therefore creating a nostalgic imagery.