Web Design & New Media - ASSIGNMENT 1 : LANDING PAGE DESIGN

Ashila Putri Sandi [0332938]

Web Design & New Media

Landing Page Design

Lecture 1

On the first week of our short semester in the Web Design & New Media class, as our lecturer, Mr Shamsul gave us a brief about what are we going to do on the short semester by showing us the marking breakdown. It was a short session because Mr Shamsul had to attend a meeting with other lecturers. But, before he had left the class, Mr Shamsul gave us a bit explanation about the characteristic of a good and bad website which related to our first exercise in the following session.

Tutorial 1

On the tutorial session, we were told to make a group. Then, we had to to our first exercise which was a group discussion. The instruction was we had to visit three websites which were :

http://www.webbyawards.com

http://www.thebestdesigns.com

http://www.thefwa.com

then, search for each 6 bad and good websites. Moreover, we had to list down the pros and cons of those website weather why is it good or bad. The aspects that we should analyse were the chosen typeface/fonts, the navigation, functionality, layout, colour, content, purpose, and so on.

After searching and did the discussion, my group and I had to present our findings, and opinions about the categorised websites. While presenting, Mr Shamsul gave us questions and gave his own opinion, we were arguing as well but that was a great argument because we got to know different perspectives from a different person.

Lecture 2

It was the second week of the short semester, the class was started by continuing the presentation from the last session because there wasn’t enough time to do all the group presentation. After we finished the presentation Mr Shamsul gave us a lecture about web design and new media.

Firstly, we were introduced to web standards. We were told that in the early days of Web, everybody accessed the Web using a keyboard, mouse, and monitor but today we can access it by using various ways such as phones or other pocket mobile devices, tablet computers with touchscreen interfaces and so on. Moreover, many people who are blind depend on speech output, and people who are unable to use their hands depending on the speech input.

Secondly, Mr Shamsul explained about hardware and software issue which are growing variety of browsers ( Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, and others), the variety of operating systems ( Windows, Mac OS, and Linux), and variety of screen resolutions (from 640 x 480 px t0 1680 x 1050 pixels and beyond. With the diversity in the way people access the web, there is a very high probability that a website will look different to many of the visitors. Although there are some differences, the most important part of the website is its content, and all users should be able to access that. That is why we need web standards to ensure that websites work across all devices and configurations. The central organisation who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C) which has defined dozens of standards, including the standard markup languages we use to build a website which are HTML and CSS ( the standard markup languages).

Then, Mr Shamsul told us about structure of a web page which we come across all kinds of documents everyday; newspaper, catalogues, etc. Thus, in all kinds of documents, structure is very important in helping readers to understand the messages we are trying to convey.

Fig 1.1 Web Page Structure

Lastly, Mr Shamsul explained us about how HTML describes the structure of pages and the tags that commonly used. In the browser window we can see a web page that features exactly the same content as the word document. To describe the structure of a web page, we add code to the words we want to appear on the page. 

HTML code is made up of characters that live inside angled brackets <> (these are called elements). Elements are usually made up of two tags; opening and closing tag.

Fig 1.2 Opening and Closing Tags

There are also attributes that tell us more about the elements. Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two part: a name and a value.

Fig 1.3 Example of heading and body in HTML language

Other elements are heading <h1> - <h6>, paragraph <p>, bold & italic <b><i>, ordered list <ol>, unordered list<ul>, list <li>, etc. We also can write links with <a> element.

ex: <a href='http;//www.google.com">IMDB</a>.

Assignment Brief

LANDING PAGE DESIGN (20%) – DUE WEEK 3

Choose the subject matter given and design ONE (1) landing page for each topic.

Each design should be able to present what the company does clearly. Be

creative yet able to describe the page usability and information structure

distinctly. Look for inspiration and refer from other establish website to have

better idea on the design.

TOPIC:

• Product

• Service

You can choose any existing company for the assignment and use all the

information and images from the Websites.

REQUIREMENT:

Landing page dimension should not exceed 1024 X 768 pixels*. Color mode RGB.

File resolution must be 72dpi.

SUBMISSION REQUIREMENT:

Please convert the file to .pdf or .jpeg and upload the files in Google Classroom

within the given time.

Work Processes

Firstly, I did some research for websites to remake. After gone through some website I finally chose 2 websites which were www.auntieannes.com for product and www.homemovers.com.my for service.

Fig 2.1 Auntie Anne's Webpage

For the Auntie Anne's website, I thought the website page was quite neat and it has a good colour scheme. However, the logo should have been bigger and the layout was very short ( they could have made it longer). So, I decided to re-make my own version of Auntie Anne's landing page.

Fig 2.2 Home Mover's Webpage

Home Movers is a service for moving our stuff in Malaysia. This picture above shows the updated version of the website. However, the first time I saw the website it was worse. Well, I managed to do some changes and layout for this website to be more simple because I thought that the design was boring and the chosen pictures were not that good.

After choosing the website, I started doing sketches for the layout of the landing page that I wanted to make.

Fig 2.3 Sketch for Auntie Anne's Landing Page

Fig 2.4 for Home Movers' Landing Page

I didn't do much detailed sketch and tried to execute it on Photoshop and Illustrator. Auntie Anne's website have a better content and pictures to use so I managed to use Adobe Photoshop for the editing process, but for Home Movers I used Illustrator because I planned to illustrate some icons.

Fig 2.5 Process of making

Fig 2.6 Process of making

I haven't finished both layout when Mr Shamsul asked for his feedback, so I only got the feedback for the Auntie Anne's. Mr Shamsul said that I need to add more white space to my work but he said the layout was better than the actual website.

Final Outcome

Google Drive Link

Feedback

Product : I chose Auntie Anne's Webpage to remake. Showed it to Mr. Shamsul and he said I should give more white space. After the following week Mr Shamsul gave me a new feedback. He said that my header text was too small, and I should've put the "Gift Cards" content more stand out. However, Mr Shamsul said that the layuout dan style was good and clear.

Service : Mr Shamsul told me to be careful when putting text infront of an image, and I needed to pay attention to the alignment of the text that has been displayed (make the text justify). Overall, Mr Shamsul said that I made the landing page better than the actual website.

Reflection

From this assignment I can tell that web design is very interesting and I want to know more and be good at it because I think it would be very useful and I enjoy doing it but it's kind of hard because it requires a balance between the design itself  and  the functionality. Moreover we need to pay attention while designing because there are many aspects to deal with such as user experience, user interface, layout, colour scheme, typography and the overall visual direction. However, though there are a lot of things that need to be considered while design a web, I think its challenging for me to be more creative and think more effective as a designer.