Interactive Design: Project 1
10/09/19-17/09/19 (Week 3-Week 4)
Angelina Lee An Qi (0334272)
Interactive Design
Project 1
Lecture Notes
Lecture 3Week 3 (10/09/19):
Past web browsers translate differently from modern web browsers. Web designers in the past had to design different layouts for different browsers.
In order to comply with web standards, we have to use CSS and HTML. Used to use Flash, but not anymore because it uses third party elements.
W3C (World Wide Web Consortium) responsible for creating and maintaining web standards and defined all sorts of standards, including standard markup standards.
HTML uses angle brackets </>
CSS uses {}
Javascript uses both {} and ()
opening tag <p>
closing tag </p>
Main elements in HTML:
<head>
<body>
<title>
six levels of headings:
<h1> main headings
<h2> subheadings
If further sections under subheadings then <h3> elements is used and so on until <h6>
For paragraphs, there is just <p>, no <p1> <p2> or <p3>.
ordered list appear in numbers created with <ol>
i.e
<ol>
<li>Chop potatoes into quarters</li>
<li>Simmer in salted water for 15-20 minutes</li>
<li>Heat milk, butter and nutmeg</li>
</ol>
(mostly used in instructions where you list out directions)
unordered list appear in bullets created with <ul>
Project 1 brief:
Create a landing page of any topic. Make sure to communicate the purpose of the site clearly.
Remember a call-to-action button!
Design a web interface in Photoshop and export as !JPEG!
Determine the goal of the website and clearly state which is the call-to-action.
Dimensions in Photoshop: (make a very long landing page going extending horizontally) web > view all presets > web-large (1920x1080)
color mode use rgb!
website must be responsive (aka to tablet or phone)
make sure to add filter
in landing page must have header, body, and filter.
Lecture 4:
Week 4 (17/09/19):For HTML use US spelling.
<!-- (this is a comment) -->
to add any notes
to change typeface call it 'font family'.
block element - each new one is created with a new line. A HTML block is a standard block used to add text, multimedia, widgets etc to a site front page or course page.
in-line elements:
<b>
<i>
<a>
16.22K quality for fast loading
jpeg stands for "joined photographic expert group"
res: 72
file type: jpeg/jpg
choose save for web when exporting!
Instructions
Project 1
Week 3: Designing Landing Page
I chose this website Osu! because I feel like their current landing page is outdated and hard to navigate. They also give you so much information which does not let for easy access of the user. I was hoping to not stray too far from their current aesthetic but simplify the layout of it and give it a more updated look.
 |
| Fig. 1.1 The original landing page of the website I am working on. |
 |
| Fig. 1.2 Working on my version of the landing page. |
 |
| Fig. 1.3 |
 |
| Fig. 1.4 |
 |
| Fig. 1.5 I added color to the background, but I felt like it was a bit weird. |
 |
| Fig. 1.6 Working on the body portion. |
 |
| Fig. 1.7 Working on the footer. I also changed the background to black. |
 | |||
| Fig. 1.8 The landing page I submitted for feedback on week 4. |
Week 4: Refining the landing page
 |
| Fig. 2.1 Made the navigation text slightly bigger and the call-to-action slightly smaller. |
 |
| Fig. 2.2 Added a section for a new user to input their email and password. |
 |
| Fig. 2.3 The final product. |
Feedback
The font size differences are too contrasting, and my call-to-action button is too big. I also have to provide more information about the game, and the sign up button must have somewhere to input email for a new user.Reflections
Experience:
I was not really sure how to start out at first. I did around 5 drafts in the first week and chose my second draft because I felt like it could showcase a video of the game so that new users will get the gist of what they are looking at.Observations:
I did not realize this when I did the NEWS portion of the landing page, but there is an insert image box tool I could have utilized. I learned about the insert image tool and used it in the BEATMAPS portion of the page.Findings:
I found that it was a pretty simple process, but it is still hard to make the landing page look nice. I first thought it was too easy to be true until I started doing it.Further Reading
What is Interaction Design? by Teo SiangIt is the design of interaction between consumers and products. There are many ways for products to interact with users, for example, with words, visual representations, physical objects or space, time and behaviour. Interaction designers strategize the design, so that it would be easy for consumers to use. They also develop wireframes and prototypes to see if the product will do well in the market.
Comments
Post a Comment