Interactive Design / Exercises
2.9.2022 - 14.10.2022 (Week 1 - Week 7)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Interactive Design
Exercises
LECTURES
Week 1: Surveying the Possibilities
This activity will give you a basic understanding of the principles behind effective website design and implementation.
The purpose of this lesson is to begin considering what makes a high-quality website.
- Why do you feel that some websites are good?
- Why do you feel that some websites are not so good?
- Do others agree with your opinion?
- Does anyone disagree?
- Who is the target audience for a particular site?
- How might website quality be judged differently across different audiences?
- Are there some qualities of websites that all audiences would agree are good? What are these qualities?
We need to consider about what quality means because if websites aren't developed with quality in mind, visitors might be unable to find the content or features they're looking for, or they might be unable to access or use these features. Users don't give websites many chances.
In addition to understanding the quality of your website, you need to spend time planning your website before you begin content creation. Planning in advance before you begin content creation will reduce mistakes.
INSTRUCTION
W2 In-class Exercise - Group Discussion
We began with an analysis and group discussion on web design. Good and bad websites each 3 were selected and analyzed to determine what aspects of each were good or bad.
Fig.2-1: Sheet
HTML and CSS Document Development
To show competencies in understanding web development through prototyping and development processes. Students will be provided with basic knowledge of creating and developing Websites.
W5 In-class Exercise - HTML
Fig.2-2: index.html
This exercise is to create a webpage for self-introduction using only HTML.
1. <!DOCTYPE>
<!DOCTYPE> is a declaration of the DTD used to interpret the document and is not, to be precise, an HTML tag.
The "DTD" stands for "Document Type Definition," and it defines information such as the names of elements (tags) and attributes that can be used in each version of HTML.
For example, "<!DOCTYPE HTML" indicates that a DTD is to be declared and that the document type is "HTML".
2. <html><head><body>
Elements below this should be enclosed in <html></html>.
<head> and <body> are used "only once" directly below the <html>.
<head> - A tag that describes code that defines information for search engines and web browsers, and encloses the entire portion of the page that is not displayed on the screen
<body> - A tag that describes the code that makes up the content itself and encloses the entire portion that will be displayed on the screen
3. Headline tag <h1>~<h6>
Search engines use the headings to index the structure and content of your web pages. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
4. <a> tag
<a> is anchor, and specifies the starting point or destination of the link.
<a href="URL">String to be linked</a>
5. <p> tag
Paragraph tag to insert text.
6. <b><i>
Tags for text decoration
<b> = Bold
<i> =italic
7. List tag
A bulleted list can be made by <ol><ul>. <ol> stands for ordered list and <ul> for unordered list. If you want to display the number, use <ol>. <li> is a tag used to enclose individual items displayed in a list. For example, if you want an ordered list of five items, it would look like this;
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
Final Outcome
Fig.2-3: Profile Page
W5 Exercise 1 - TRIATHLON HISTORY
Subject Outline
You are required to create a web document based on the content given. Please follow exactly the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). For a start, you need to create the document using Text Edit or Note Pad as shown in class. Kindly add a related image on top of the document. Remember to name the file as index.html and save the file in a folder Exercise One.After you have completed the task, you are required to upload the web document to a web hosting (Netlify) and submit the link in Google Classroom. Please rename the netlify file name to exercise1_yourname from the change site name setting. Follow the Youtube video tutorial provided.
Fig.2-4: Given Article
The method of creation is similar to the in-class exercises. Create a web page using the tags we have learned.
Fig.2-5: Related image
Find relevant images to insert at the top of the document. I am using a commercial-free one.
Final Outcome
Exercise 2 - Vision for the Unequal World
Fig.2-6: Top Design
Fig.2-7: 2 Column CSS
I created the HTML and CSS as I learned in Exercise 1, but there was one part I could not do. I really wanted to make a two-column layout for the content, so I researched how to do it. I found a variety of methods, like display flex and flex wrap, but this time I used flex wrap, which seemed easier.
Fig.2-8: 2 Column Design
It took some time, but I finally managed to do it.
Final Outcome
Exercise 3 - Independent Learning Week Task
We choose one website from the choices given and recreate the design of the entire main/landing page. This task is designed to help you see the nuances of website design and gain a better understanding of the layout. All websites listed are current web design trends. You may use images from any stock image site in place of the original images.
I chose 4. WWF website.
Fig.2-9: Their Original Website Design
Fig.2-10: Inspection
I examined font size, margin width, etc., using inspection in google chrome.
Fig.2-11: Free Photo 1
Fig.2-11: Free Photo 2
Fig.2-11: Logo with Transparent Background
I downloaded photo materials from stock and searched the Internet for WWF background transparent logos. I inserted these and completed the entire design in Illustrator, which is shown below.
Final Outcome
Fig.2-12: Final Outcome JPEG
Exercise 4 - The Ultimate Web Design Workspace for Photoshop
Fig.2-13: Top Design
At this stage, based on what I had learned in previous exercises, I had almost no hesitation in coding. One new challenge, however, was to change the width of the two columns. There is a section I made with an approximate ratio of 70% left and 30% right. It is set by @media to automatically wrap around the bottom in the smartphone version.
Final Outcome
W10 In-class Exercise - Layout Exercise
Here we learned for the first time how to create and link style.css separately, instead of writing inline CSS in HTML.
.js, etc. can also be linked in a similar manner, although the html code is a bit different.
Main tags utilized in this project
- display: flex;
- justify-content: center;
- align-items: center;
- float: left;
- justify-content: center;
- box-sizing: border-box;
This exercise is designed to help you learn the steps for creating a layout for subsequent LP, website coding.
Fig.2-14: Layout Exercise
Final Outcome
W11 In-class Exercise - Bootstrap Tutor
In this exercise, we learned how to install Bootstrap.
Fig.2-15: Top Design
Once Bootstrap is installed, carousels and columns can be easily created by simply specifying classes.
Fig.2-16: Functions
The cards and forms are also available in pre-defined designs (Customizable). The fact that you don't have to make everything yourself saves you a great deal of time. However, if you try to write and customize the CSS yourself, sometimes it does not work due to errors. In that case, "! important" may work.
Final Outcome
REFLECTIONS
ExperiencesIn the programmatic part of the course, we learned HTML, CSS From very basic things such as the use of brackets to slightly more complex things such as decorating with CSS, I think it will be very useful in future productions.
Observation
Basically, all elements start in the upper left corner. Then I understood the principle of inserting content within <div>, <span> and <a> like lumpy elements. I also felt that the site design is deep enough to combine several elements, such as flexing and floating elements, and specifying that wrap-around elements work above/below 00px, etc., so that the final site can be beautifully visible from any device. I would like to study responsive design.
Findings
We learned how to write basic HTML and CSS. These were very interesting to me, and since any site is built on these languages as a base, I found that once I knew how to use the basics, all I had to do was look up what I wanted to do and I could use the new features.
Comments
Post a Comment