Labels

EXERCISE (Interactive Design)

30 MARCH 2022- 11 MAY 2022 ( WEEK 01- WEEK 07)
CHIN ZHI XIAN / 0344352
BACHELOR OF DESIGN (HONS) CREATIVE MEDIA / Interactive Design
Exercise

INSTRUCTIONS

LECTURE (WEEK 1)

What Is a website

• Web document on the internet
• One page or more
• With intended purpose


Different types of websites

Types of websites
There are many different types of websites on the internet
  • Informational website
  • Corporate website
  • Portfolio website
  • Brochure website
  • Entertainment website
  • Personal website
  • Educational website
  • E-commerce website
  • Nonprofit website

Basic Site Evaluation

Overview
  • These two lessons give you a basic understanding of the principles behind effective website design and implementation. You're probably eager to get started developing your first websites, but first things first! Web design requires careful planning and consideration of what it is exactly defines a good website. In this module, you will visit a variety of websites and explore what you perceive to be good and bad qualities of each.
  • Also in this module, you will develop a tool for measuring website quality. This tool will be used throughout the course and will be used in evaluating the quality of your own work.

Surveying the Possibilities

Overview
  • The purpose of this lesson is to begin considering what makes a high-quality website. As a group, we will explore questions such as these:
  • 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?

  • It is tempting in a web design course to plunge in and start right away creating and developing web pages. However, since our goal is for you to learn to develop high-quality websites, we first must spend some time developing an understanding of what "quality" means. This is important 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. If they don't like a site, they may leave quickly and never return. If they like a site, they'll return to it again and again, plus they'll tell others about it.

  • In addition to understanding website quality, you must spend some time planning a website before you begin to develop its content. Planning ahead will reduce the number of mistakes you'll make while constructing the site. In the work world, this will save you time and money.

Outcome

At the completion of this exercise:

  • you will be able to critically evaluate websites based on purpose, design and usability.
  • you will be able to identify the major criteria that experts use to evaluate websites and apply those criteria to your own evaluations.

Activities
  • What is a high-quality website? As a group, discuss the questions presented in the Overview section above.
  • What do the experts say? Visit this website: http://www.webbyawards.com,
  • http:// www.thebestdesigns.com or any other website that you think is good or bad.
  • Each of these resources provides someone else's opinions as to what constitutes high-quality websites. Which of these resources do you most agree with? Do you disagree with any of these authors' opinions? Do the winners of Webby Awards have features or characteristics that you don't like? Discuss this as a group.
  • Become a web critic. Browse the web and choose SIX websites that are good and SIX that's bad.
  • Comment on the site's design. Does the site look good? What is the eye drawn to immediately?
  • Comment on the site's content. What seems to be the main purpose of the site? Is the purpose clear?

LECTURE (WEEK 2)

LECTURE (WEEK 3)

LECTURE (WEEK 4)


LECTURE (WEEK 5)



EXERCISE (WEEK 1)

The first exercise the instructor gave us was discovering the different types of websites and how to evaluate a successful website

We need to browse the web and choose 3 good sites and 3 bad sites. Comment on the design and content of the website. What are the eyes immediately attracted to? What seems to be the main purpose of the site? Is the purpose clear?

Basic site evaluation, Week 1 


Week 2

We use TextEdit (Mac users) or Notepad (Windows users) to play with the basic HTML.

<h1>Heading 1</h1>
<h2>sub-headings</h2>

<title>Title to show in the tab bar</title>

<head></head> (usually find <title> element inside the <head> element
    <i>Itallic</i> 

        <b>Bold</b>

            <u>Underline</u>

                <p>paragraph</p>

                        <ol>
                            <li>no.1</li>
                            <li>no.2</li>
                            <li>no.3</li>
                        </ol>

                        <ul>
                            <li>bullet point 1</li>
                            <li>bullet point 2</li>
                            <li>bullet point 3</li>
                       <ul>
                            <li>nested list</li>
                       </ul>
                        </ul>

Hyperlink
<a> is anchor
href is hyperlink reference
target="_blank" means open website in new tab
title="tooltip" means the tooltip when hovering
<a href="link" target="_blank"> THE TEXT</a>
alt is alternate word, for keyword search in search engine

Exercise 1 / HTML and CSS document development

We need to create a web document from the given content. First, we need to create a document using a text editor or Dreamviewer as shown in class. Remember to name the file index and save the file in a folder called "exercise1-chinzhixiansky". After completing the task, we need to upload the web document to web hosting (Netlify).




Firstly register a free account at NETLIFY. Then create a new site, choose to deploy manually and upload the entire folder in. Remember the file name must be index


Submission Link
https://exercise1-chinzhixiansky.netlify.app/


Exercise 2 / CSS Layout

We need to create an HTML page with the given content. Provide an image to insert the desired section. In each main section, including the id attribute, which will be used later as an anchor for linking from the navigation (in the first section of the content).




Use DREAMVIEWER to complete my task.





Submission Link


REFLECTION

This was a difficult challenge for me as I had never learned to code before. I think HTML and CSS are more difficult than I thought. Although I did run into some issues along the way, Mr Shamsul was very helpful in fixing my errors. The biggest problem I face is remembering/familiar with a lot of terms.
Labels:

Comments

Post a Comment

Popular Posts