Project 1
Jennifer Tan (0333137)
Interactive Design
Project 1
LECTURES
Week 3
Lecture 3: The Web
This week we learnt about Web Standards. Mr Shamsul gave us a lecture about the World Wide Web and how it has been established from past to present. We also learnt how to differentiate between the web and the internet.
How the web works:
- Connecting to a web uses ISP.
- Computer then contacts a network os servers called DNS servers which act like phone books. These servers are the ones responsible to associate IP address with the requested domain name.
- The number that the DNS server returns to our computer allows the browser to contact the web sever that hosts the website that we have requested.
- The web server then sends the page you requested back to our web browser.
INSTRUCTIONS
PROJECT 1
Week 3-5
Research and Sketches
For the first project we were required to design a landing page that has a call to action of our choice. The moment I heard about the project, I thought about my favourite South Korean boy group BTS.1 year ago, they collaborated with Unicef to make a campaign called #ENDviolence. Below is the official website for it.
 |
| 1.1 Original website |
Honestly, I find it quite boring and it doesn't really empower their campaign. So I decided that I would try and make it a little better since I have the chance.
First I listed down what I would wanted to include in the website. I also referred to the original website while I'm at it.
- Call to action to "donate now"
- What its about
- The mission
- the accumulated funds
- and also a final message, to one again donate.
Then I started to sketch out what I would want my website would like it.
 |
| 1.2 sketch |
 |
| Figure 1.3 sketch 2 |
I also went online to look at some examples. Below are some of the websites that I was inspired.
 |
| Figure 1.4 Website for theArtCenter |
 |
| Figure 1.5 Website for Wonderland |
 |
| Figure 1.6 Website for Moonfarmer |
 |
| Figure 1. 7Website for Wonder |
I gathered some elements that will help me build the website.
 |
| Figure 1.8 Colour palette |
 |
| Figure 1.9 The picture that I will be including in the website |
 |
| Figure 1.10 The original album by BTS |
 |
| Figure 1.11 Flower symbols that is on one of the albums by BTS, which is titled LOVE YOURSELF : HER |
I also downloaded a font that matches the website.
 |
| Figure 1.12 Downloaded font |
Constructions
I then moved on to building my website in Photoshop. I first painted the background using the colour palette.
 |
| Figure 1.13 Progress |
Then I moved on to building the website.
 |
| Figure 1.14 Progress |
 |
| Figure 1.15 Progress |
 |
| Figure 1.16 Progress |
 |
| Figure 1.17 Progress |
 |
| Figure 1.18 Progress |
 |
| Figure 1.19 Progress |
 |
| Figure 1.20 First attempt |
 |
| Figure 1.21 2nd attempt with minor spacing changes |
 |
| Figure 1.22 3rd attempt with minor space changes |
This week, we consulted Mr Shamsul on our website. After his feedback, I went and make some changes according to what feedback he has given me.
Below is my final outcome with the burger menu.
 |
| Figure 1.23 Final Outcome |
 |
| Figure 1.24 With burger menu open |
 |
| Figure 1.25 Final Outcome |
 |
| Figure 1.26 Final Outcome |
FEEDBACK
Week 3
This week, I showed my idea for the first project. Mr Shamsul first asked me not to make a website that introduces Kpop members as it was getting kind of boring. I then told him I wasn't and that I was going to make a website dedicated to the collaboration between BTS and UNICEF with the call to action to donate. Mr Shamsul thought it was okay and interesting and asked me to proceed with the project
Week 4
This week I showed him my website. He commented that the spacing was okay it just needs a little more whitespace. Some spacing should be equal too. Also, the burger menu was a little too big and that I should make it smaller. The arrow that directs users to scroll was a little too much and Mr Shamsul told me to change to an arrow that was more in trend. The colour of the text was also not so visible and that I should change the colour. He said that the website was quite beautiful and much better when compared to the original and that there's a good harmony between the colours.
Week 5
This week I showed him the website along with the burger menu page. He said overall it looks okay. He commented that the burger menu was still a little too big. The font for the 2nd page was also a little to old fashioned when compared to the title being quite modern and that I should use another typeface that was the same as the other pages. Besides that, he also commented that on my burger menu, the colour of the background should just be one colour and shouldnt be the same as the main. The lines between the menu selections should also be a little longer.
FINDINGS
Week 3
This week I found out more about the web than I originally did. I literally didn't expect that there was much more to a website and the internet.
Week 4
I found out that whitespace is something that is quite important as it kind of eases the spacing and makes a page not look too cramped. I also found out that we should be really careful with our choice of colour with fonts and also with spacing.
Week 5
This week I found out that fonts shouldn't have a big contrast between each other. It should stay in the same category like a modern or traditional look .
OBSERVATIONS
Week 3
This week, I could see that my classmates and I were really confused during the lectures when we were lectured about the world wide web and the internet and we were really fascinated.
Week 4
This week, with the introduction of html, I could see that we were kind of intimidated especially with the coding of html.
Week 5
I realised that we are a little more comfortable with the coding part of html and that my classmates are slowly understanding and getting faster.
EXPERIENCES
Week 3
This week I really learnt a whole lot about the worldwide web and also about the internet. Also with this project, Im actually quite excited with what I can create, especially with my favourite Korean boy group.
Week 4
I'm actually having fun while designing the website and I love that I'm enjoying it. Its fun how I could experiment with colours and also other elements. But at the same time, with html being introduced, I'm honestly intimidated. I literally learnt this before but I forgot everything form 3 years ago. So thinking that I have to learn it again makes me feel bored. Im not a really big coding fan.
Week 5
This week, with another html exercise, I could feel myself failing in this because of me being so constantly confused.
FURTHER READING
Week 3
What Makes a Great Website? by Kendra Strickler
Link
The quality of a website is really important as it gives the first impressions of a company or a business. Its really up to a users POV to judge how functional a website is and it should reflect everything that your potential audience would want to know about your website. Expectations may be really high as there are always competitors so making a website thats simple and easy enough for the users is really crucial.
10 Websites Trends In the 21st Century.
1. Responsive Design
Having a responsive website is the most basic requirement when it comes to a great website. Websites should be able to easily responded according to the needs of the user. With mobile devices being developed and becoming a norm to the society, having a responsive website is a must
2. Minimalism
Minimalism is becoming a big trend in this point of time and many websites are taking the minimalist approach music minimalistic designs and layouts with fewer pages, with simpler designs and more blank space.
3. User-Friendly
Usability is always important and its key to a successful website. Websites that are simple and functional with easy navigation, customers are more likely to revisit it again. If customers can't easily make their way around your site, they aren't likely to stay long
4. Personalised User Experience
Rather than every user having the same experience, a personalised user experience design allows users to customise and specify the website according to their interest and needs. The website adapts to visitors interest so users can easily navigate through the website without much hassle.
5. Extraordinary Content
Websites that provide users/visitors with information that is presented in different forms and ways such as videos or images are more attractive and are normally more successfully than those that are just plain text. With technology advancing and the newer generation having easy access to the web, a good looking and extraordinary website would attract users more.
6. Bold Colours
Bold colours can make a powerful impact on the visitors. Using bold colours when designing websites wasn't a norm until recent years as bold colours can be perceived as childish or unprofessional. With colours used, especially in flat design websites, bright colours can make quite a difference.
7. Videos
Videos is a very easy medium as people prefer fast communication and watching videos is much more easier to engage users rather than just plain text.
8. Card-Based Design
One of the beefits of a Card Based Design is that it adapts to different screens and they can be easily adjusted. It goes along with the theme of simplicity and minimalism while providing short and simple burst of information that can be digested easily.
9. Wall to Wall Site Strips
Week 4
A Brief History of HTML by Jeffrey Veen
Link
For this week, I read about a brief history HTML.
Tim Bernes Lee, which is the creator of the world wide web, was his first elementary browsing and authoring system for the web when he first created a quick small hypertext system that could serve his purpose. He thought a about a bunch of different hypertext language and let it do its work. It was a system that could work on any platform and browser.
The problem with the html system was the simplicity of Berners-Lees language. Since it was text-based, you could use any editor or word processor to crate or convert documents for the web and html is something thats really easy to master. Because of HTML, everybody started to publish websites of their own.
As more and more content was uploaded to the web, creators thought that the HTML should be improved. So developers started to include and create new features to add to their browsers. If the community like it, it stayed, if not they were removed.
HTML then continued to grow more and more with new tags like <background>, <font> and others.
Week 5
Web Design Aesthetics by Paul Mcarthy
There are a few things to consider when it comes to web design aesthetics.
1. Look at your homepage
Is it engaging? Does it spark any interest? Does it give a clear message? Does it bore you? Even if you're working solo, with free website templates, the first impression must always be considered. If it looks cheap and tacky, then it will not excite users and it will make users be doubtful of what you're trying to offer. Because of this, they will mostly click off before they even go through the first page.
2. Site Design and Eye Appeal
Websites should be appealing, but different users have different taste and one can be more attracted the website than the other. Elements of visual design should be considered. What is being designed should be based on a selected target audience.
3. Site Demographic
Product selection, tone of screen text, motifs, marketing strategies, links-virtually everything should be targeted with precision. The target audience should be considered so in order to make it easier, list down key words that describe the target market, like what are their concerns, their needs, their emotions? Market research should be done to so it makes your job more easier.
4. Market expectations
For this, we have to know what does the target demographic expect when they shop online. A certain attitude? Warm and fuzzy? All of these has to be considered so that they can come together and play with other elements.
Comments
Post a Comment