Web Design by Megna Santhosh

web design

done by megna santhosh

Introduction to Web Design Critique on 3 websites Brief for personal website Finding Myself Finding Inspiration Inspiration from a Song Developing a color guide Final Topic for personal website Research Developing Site map Developing graphics Developing Wire frames Final prototype group project acknowledgement reflective note

CONTENTS

Introduction to Web Introduction toDesign Web Design

3 Iâ&#x20AC;&#x2122;s of Web Design

Softwares i used for Web design

What is Web design? Web design is a process of conceptualizing, planning, and building a collection of electronic files that determine the layout, colors, text styles, structure, graphics, images, and use of interactive features that deliver pages to your site visitors.

Information Architecture i. Organizing Your Information ii. Site Structure- sitemaps and flow diagrams

Interaction Design i. Navigation and way-finding

Interface Design i. Matching visual form and style to content and audience needs ii. Interface design â&#x20AC;&#x201C; wireframes, Style Sheets and prototypes iii. Visual design & multimedia â&#x20AC;&#x201C; layout, graphics, colour, typography, etc. iv. Appropriate use of software HTML, HTML5, CSS etc.

Adobe muse Adobe Muse is a Software by Adobe Systems. The software is focused on allowing designers to create websites without having to write any code. This application is available through Adobe Creative Cloud.

Critique on 3 Web sites

Brief Each student needs to share 3 links of the website which they like/interacted with; the most with the note why they liked in 500 words

Links 1) http://www.world-of-swiss.com/ en#boeing777 2) https://insideabbeyroad.withgoogle. com/en/all-access/ studio-3/3017#x=0.794&y=0.195&z=0.576 3) http://www.johos.at/#/en/1/0

http://www.world-of-swiss.com/en#boeing777 The Swiss airlines have built an incredibly immersive site that tells their story and describes what it’s like to fly with them. From their classic Swiss inspired menu’s to the cockpit the website contains information from A to Z on what the flight offers its passengers. When you first enter the site the ambience is massively creative. The background filled with clouds makes you feel like you have immersed yourself in air. The main page displays the bright red logo of The Swiss airways on the extreme top left corner causing no disruption to the completely smoothening sky atmospheric background. On the right there are Circular icons which enable the user go back and forth as they prefer to view the pages according to their convenience. It serves the purpose of navigation When you scroll up or let’s say fly up even more options, basically the main headings

start popping out among the clouds. When you click on each of those headings you’ll fly away to the different videos and information on the same. Strong visuals and animations introduce the user to different sections of the site that are packed with information beyond the usual sales and marketing pitch that is so common today. Throwing a visual justice to their tag line “Swiss first discover a new world before you even get there. “This website helps the user experience the view of the flights from the sky! Now that’s pretty cool isn’t it? The website also has a share option on its various web pages just in case you would find anything interesting in this website you would want to share(I found every single minor detail in this website interesting by the way) Even though the Information Architecture which is the structure for the content of this

website is remarkable the Interaction design or the navigation from one page to another is extremely time consuming. Since Adults are the users who would visit the website to know about the airways they would not prefer spending their time floating around in the clouds and patiently waiting for the other set of information to arrive. Hence I would suggest if the home page as well as the other pages had icons (Including home page icon, introduction icon etc.) which would help people who have less time to spare on enjoying the animation to get to their information as soon as possible. They do have a menu bar at the side with pictorial representation of the various contents of the website but it doesn’t serve the purpose of easy navigation .Over all, since I belong to the set of people who would spend time exploring the website I had a blast flying through all the different options and walking into the various interiors of the flight. Splendid.

Inside Abbey Road is a site built by Google in partnership with Abbey Road Studios. The aim is to enable anyone in the world to follow in the footsteps of musical legends, and step inside the famous British recording studio as it’s never been seen before. Once inside, you can explore every nook and cranny of the three recording studios, and discover stories, images, videos and music spanning the decades. You can also be guided around by producer Giles Martin, Head of Audio Products Mirek Stiles, or broadcaster Lauren Laverne, and even play with interactive versions of pioneering Abbey Road Studios equipment. A highly interactive site, which allows users to step into the Abbey Road Studios. Brilliant sound design, navigation mechanics, and visuals mixed with a free tutorial on how to use the site.

The home page has a tremendous background music which gives you the chills and information about the website.When you scroll down more information about the website is available.

A 360 degree experience of the 3 recording studios where artists like Sam Smith Adele and The Beatles have recorded. The website walked me through the exact spot in the studio where my favorite performer recorded his song. The website showed this through videos and snaps. (My favorite among them is Sam Smith) It was awesome to have a 360 degree view of the spot in the studio where Sam Smith recorded his song. The best thing about this website is that it has a menu bar showing which all features of the website like the videos and information you have browsed through and which all you haven’t. It helps you keep a track of the things you have missed or accidently skipped while browsing. The website genuinely communicates what the various icons or symbols which are present throughout this enormous website stands for so it’s easier for the user to know before hand and not waste time trying to figure out every element of the website.

There is no way a user can get lost in this website even though the 360 degree feature can confuse you a little bit, a pre recorded voice guides you through the studios informing you on how to navigate.The picture above shows a lady in a circular icon which will tour you around the studio.The Information Architecture was spot on. The navigation for its users were well planned which includes the menue bar and the pre recorded voice which helps you navigate.The total layout was based on a studio like theme which is impressive. As an overall package this is one amazing interactive website. 3 cheers for it!

https://insideabbeyroad.withgoogle.com/en/all-access/ studio-3/3017#x=0.794&y=0.195&z=0.576

http://www.johos.at/#/en/1/0 The website for JOHO's Bean has incredible imagery, interactivity, storytelling, visual design, and most of all, sound engineering. These all come together to create a compelling, emotional, and engaging site that tells the story of a coffee bean's journey. The first page provides 3 options which include information “About” the website. It’s amazing to see how coffee beans are cultivated and from where it comes from, pictorially and with appropriate sound effects.

Brief for personal website

Brief Develope a website on a topic of your personal interest. The website should communicate to its viewers whom you are as a person through its look and feel.

Finding myself We were asked to creatively express our selves on paper by Ms Kale. I jotted down my areas of interest on a piece of paper as quick as possible. As a musician I was inspired by “THe sound of music”. I replaced the lyrics of the song “favourite things” from the movie “ Sound of music” with a list of my own favourite things.

Finding inspiration After brainstorming my area’s of interests, I discussed my extremely passionate hobbies with Ms Kale which included singing, cartoons, movies and afcourse food. Mss Kale suggested I should choose a specific song of my interest and figure out a color scheme according to the entire mood of the song.

Inspiration from a song My auto ride home from college was filled with desperate thoughts on which song from my playlist was the apt one. The song to demolish my desperation played on t.v that night though the malayalam song did drive me home sick it took me back to the land where I grew up.

Developing a color palate The song worked wonders for me. Its entire mood and jingle reinded me of home. The nature, seafood, warmth, fresh air and peaceful sunsets. The colors I came up with were yellow, green, blue, white and grey

Final Topic for personal website “My Theme and Mission for this website is a personal adventurous voyage to unravel the various jewels of Kerala hidden within the Royalty of Delhi to cure my fellow Keralites and I from the evil hands of “The homesickness”. Call me Queen of rambling and join my army of hungry keralites on a quest to find “God’s Own Country in the Capital”

research I started off with my secondary research which included surfing the net for kerala restraunts as well as shops and destinations inspired by kerala in Delhi.The internet lead me to the kerala house, guruvayur temple, The Sacred heartâ&#x20AC;&#x2122;s cathredal as well as The International Kathakali centre Delhi. My Primary Research was the most nerve wrecking experience in this project. Many times the staff of the kerala house refused to provide information on the cuisine and i had to leave for home empty handed. I travelled around Delhi insearch of the the various jewels hidden in te royalty of Delhi. From Lajpat to Naraina Village. The experience was something a book couldnâ&#x20AC;&#x2122;t teach me.

If you happen to miss spotting these huge magnificent creatures on the road along with all the vehicles in a traffic Jam back in Cochin, The Kerala House in Connaught place,Delhi offers you a spectacular view of a huge elephant sculpture resting in their garden.

I spotted a man selling fish on my way to the Shadhipur metro station. Even though it's an Unusual sight to spot men selling fish on the roads of Delhi,watch out for the weekly markets held in your locality ! You just might end up spotting more seafood.

As I was gallivanting about in the Janpath Market ,Delhi I came across a necklace which resembles The kaasu mala or gold coin necklace.In kaasu mala you will find lots of gold coins neatly arranged across the necklace.Kaasu mala is worn by a Malayali bride on her wedding day.

Kathakali is a form of dramatic dance of kerala, based on Hindu literature and characterized by masks, stylized costume and make-up, and frequent use of mime. International Kathakali Centre in Delhi conducts promotion, teaching and performance of kathakali. So If your a classical dancer dont just sit around studying enhance your dancing skills by taking up kathakali in The International Kathakali centre, Shaheed Jeet Singh Marg, Qutab Institutional Area, New Delhi, Delhi 110016

Developing Site map

INTRO PAGE

HOME PAGE

HOME PAGE ELEPHANT

FOOD ELEPHANT

FOOD

JEWELLERY

KATHAKALI

RELIGION

BACKWATERS

RELIGION

BACKWATERS

JEWELLERY

INTRO PAGE

KATHAKALI

HOME PAGE

ABOUT PAGE

RELIGION

BACKWATERS

ELEPHANT

FOOD

JEWELLERY

KATHAKALI

INTRO PAGE

HOME PAGE

ABOUT PAGE

ELEPHANT

FOOD

JEWELLERY

KATHAKALI

RELIGION

BACKWATERS

INFO

developing graphics After getting the site map approved from Ms. Kale I moved on to developing graphics for the various pages of my website which included vector forms of an elephant, jewellery, kathakali, religion and backwaters.Since the website would display my photography i laid very less emphasis on the graphics and more on the photos.

Developing wire frames

1(a)

1(b

1(a)

1(a1)

1(a2)

1(a3)

1(a4)

1(a5)

1(a6)

final prototype

The picture on the top left is the intro page.It includes a gif background and hover buttons which will leads to the two web pages, the pictures of which is mentioned on the top left and bottom. The about page is the picture mentioned in the bottom. The about page conI have used a cloud background beacause the website is about exploring.And The sky is no limit to this quest. The top left picture is the home page from which the users can navigate to the 7 other pages which contains information on the various jewels of kerala hidden within the royalty of delhi.

the other pages of the website

group project We were asked to form groups and Develope a website on a topic of our own interest. The website should communicate to its viewers information about the topic through its look and feel. After brainstorming our areaâ&#x20AC;&#x2122;s of interests, My group members and I discussed our extremely passionate topics with Ms Kale which included desserts, cartoons, weddings and afcourse festivals. Mss Kale suggested we should choose a specific topic which would be apt to develope a website.We chose dreams and itâ&#x20AC;&#x2122;s significance. The topic worked wonders for us. Its entire mood was so mysterious our color scheme was blue, black, white and purple. Soon we finished off with our research, site maps, wire frames and prototypes.

about the website

It’s insanely dark and you find yourself amidst a graveyard. Your eyes spot a horrendous dark yellow full moon in the dark bluish grey sky .Crows and Ravens feasting on dead remains of innocent animals and the dead rising from their graves. Well, hold your horses! Isn’t this surreal? You’re obviously dreaming but does your dream haunt you in your reality? Terrifying! Welcome to Reverie Hub the official dream website where we believe that every great dream begins with a dreamer. Bring peace to your wandering mind which is curious to find answers to the several mysterious, horrifying and incomplete dreams you experience in your suspended consciousness. Interpret your dream by clicking the Ancient willow tree on the home page where you can voice search answers to your questions and expect a clever reply from the willow herself or just by typing down your dream on the search bar on the top of the home page and click on the book of dreams icon to read about what your dream signifies. You can also post questions about your dream meanings by signing up to The Reverie Hub. You would receive a mail with the answers to your questions. We like to be challenged and always try to surprise our users with refreshing information. We believe the best way to unravel your dreams is through this website. Also feel free to reach out to us in case of any queries. Email us: Reverie.hub@gmail.com

acknowledgement I would like to express my special thanks of gratitude to my teacher Lolita Maâ&#x20AC;&#x2122;am who gave me the golden opportunity to do this wonderful project on the topic Design research which also helped me in doing a lot of Research and i came to know about so many new things I am really thankful to them. Secondly i would also like to thank my parents and friends who helped me a lot in finalizing this project within the limited time frame.

reflective note I learnt the process of developing a website very effectively through this assignment.I learnt how to create a GIF image, how to create a website using the software muse and how to conduct a primary research .I also learnt how to manage time and redo my entire website in 3 days after my laptop crashed tragically. I also learnt how to keep the files in my computer organised and found learning from my peers absolutely useful.