Interactive Design-Exercises
28/08/2023-18/10/2023(Week 1 - Week 8)
Jordan Axel / 0354894
Typography / Bachelor of Design in Creative Media / Taylor's University
Exercises
LECTURES
Week 1 - Introduction & Briefing
Mr. Shamsul reviewed the module information booklet this week and went over all of the projects and assignments we will be completing this semester. After that, he gave us the go-ahead to download Dreamweaver, join up for Netlifly, and finish the first task, which is to evaluate a website using the provided URL. To make it simple for us to communicate with one another if we had any queries about the jobs, he also joined us to a WhatsApp group.
Week 2 - Usability
Usability is the measure of how user-friendly, effective, and pleasant a digital product is for its intended consumers. It is an important component of design since it has a direct impact on the user's overall experience and can determine whether a product or service succeeds or fails. Important usability factors include:
-Consistency: A consistent interface design keeps the application's layout, navigation, and visual components uniform, making it more predictable and user-friendly.
-Simplicity: By incorporating simplicity into designs, users will be able to complete their tasks more quickly and effectively while also enjoying a wonderful user experience.
-Visibility: The greater an element's visibility, the more probable it is that users will be aware of it and understand how to utilise it. Users should be able to identify their options and how to get them by simply browsing an interface.
-Feedback: Users should get unambiguous information about their activities, such as a signal indicating whether they were successful or unsuccessful in carrying out a task.
-Error Prevention: The user interface has to include instructions on how to fix mistakes.
Week 3 - Understanding Website Structure
Website structure is important because it has a direct effect on user experience, search engine optimisation (SEO), and a website's overall success. These are the three essential components:
Header: The portion of a page at the top that often includes the website's logo, menu, and contact details. It gives consumers easy access to navigation and critical information.
Body: A webpage's primary content section, which often includes text, photos, videos, and other multimedia components. For readability, the body's material must be well organised.
Footer: It is usually found at the bottom of a webpage and contains contact information, links to significant pages, and copyright information. The webpage is concluded, and there are more navigation possibilities, at the footer.
Organizing Content: Use headings (H1, H2, H3) to create a hierarchical structure.
Navigation menu: It facilitates website navigation for users. Consider employing dropdown menus for complicated sites, but be sure to provide clear, succinct names for menu items.
Week 4 - The Web and Language
To promote consistency, interoperability, and accessibility across the World Wide Web, international organizations have created a set of principles and specifications known as web standards. These guidelines, which are frequently enforced by groups like the World Wide Web Consortium (W3C) and the Internet Engineering Task Force (IETF), specify how HTML, CSS, and JavaScript web publications should be written and interpreted.
The purpose:
Future-Proofing: Following to web standards, websites and applications are kept current with new upgrades and technology. It lessens the possibility of problems developing when browsers add new features or upgrades.
Search Engine Optimization (SEO): Web standards help web documents be more organised and understandable overall, which benefits search engine rankings. Well-structured, standards-compliant information is favoured by search engines.
HTML Scripting
The basic coding language used to build the structure and content of web pages is called HTML, or Hypertext Markup Language. It acts as the framework for the World Wide Web and enables web designers to specify the different webpage components, including headings, paragraphs, links, images, forms, and more. HTML marks up and structures content using a system of tags, which are symbolized by angled brackets.
HTML Elements | <element>Information</element>
<body>: You met the <body> element in the first example created. Everything inside this element is shown inside the main browser window.
<head>: Before the <body> element, you will often see a <head> element. This contains information about the page. You will usually find a <title> element inside the <head> element.
<title>: The contents of the <title> element are either shown at the top of the browser (tab bar).
<p>: To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.
<b>: By enclosing words in the tags <b> and </b> we can make characters appear bold.
<i>: By enclosing words in the tags <i> and </i> we can make characters appear italic.
<ol>: The ordered list is created with the <ol> element.
<li>: Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item).
<ul>: The unordered list is created with the <ul> element.
<a>: Links are created using the <a> element which has an attribute called href. The value of the href attributes is the page that you want user to go to when they click on the link.
<img>: The <img> HTML tag serves the purpose of incorporating images into a web page. In the context of web design, it's important to note that images are not physically inserted within a web page; instead, they are linked to it. The <img> tag essentially establishes a designated space for displaying the referenced image.
src - this attribute specifies the path to the image
alt - this attribute provides alternative text for the image, which is essential for accessibility
Title - this attribute provides tool tip of the image in the browser
HTML has 6 levels of headings:
<h1> main heading
<h2> subheading
<h3> and so on
Tips on creating HTML:
- no uppercase, only lowercase
- always command + s (to save the file every time)
- if wanted to create another attribute, there needs to be a space in between before typing another attribute
Week 5 - HTML & CSS
ID attribute
A unique identifier is provided for each individual HTML element by the "id" attribute, ensuring that no two items on the same page have the same identifier. When using JavaScript functions or when applying special styles to an element, this uniqueness is advantageous.
Class attribute
HTML components that share common styling or behavior are grouped using the "class" attribute. When several elements belong to the same class, developers can universally apply styles or scripts to these grouped items. Developers can apply the same styling to numerous elements by using the "class" attribute instead of the "id" attribute because it is not page-specific like the "id" attribute.
Introduction to CSS
Cascading Style Sheets (CSS), a style sheet language, is used by web developers to define the visual display and layout of HTML content. CSS connects styles like colours, fonts, spacing, and positioning to HTML elements to make them look more appealing. By allowing developers to separate a webpage's structure and content from its design, this promotes a more modular and maintainable approach to web development.
Methods in CSS are procedures or strategies used to apply styles and manage how HTML components are displayed. Among the essential techniques used in CSS are:
Utilizes selectors to target certain HTML elements and apply styles. Simple element-based selectors like p> for paragraphs or more intricate combinations that target certain components based on their attributes, classes, or IDs are all examples of selectors.
Pseudo-Classes and Pseudo-Elements: Target particular elements or states. Examples include::before and::after, which produce pseudo-elements for further styling, and::hover, which targets elements when the user hovers over them.
Transitions and Animations: Animations and transitions can be made smoothly with the use of CSS attributes. While animations allow for the production of more intricate and dynamic visual effects, transitions allow for subtle changes in style, such as color or size.
Exercise 1
Web analysis
Site 1: https://jacquemussimonport.tilda.ws/en
The purpose of this website is to tell the story of Jacquemus Simon Port and the creation of his brandwhich is effectively communicated through a single page website. The design is comprised of a collage art style
accompanied with some graphic animations to emphasize the information shown with accent colors of mostly
bright color and the rest being monotone. The fonts are all sans-serif with different weight and sizes to distinguish
the visual hierarchy. The imagery plays an important role in website design especially for story telling.The usability is straightforward and intuitive because it only requires the user to scroll down the whole time.
However, in that case the website lacks a navigation bar which makes it difficult to skip when you want to go
to the desired section. Although this specific website doesn’t have a form,
the interactive elements while
scrolling are entertaining and amusing. In terms of accuracy the fonts used are consistent across the webpage.
The story text is concise and easy to understand and the layout is well organized. There is a little bit of buffering in the loading page. When tested with a smaller window in chrome
the responsiveness for the most part is fine except for a particular section that overlapped on another heading.
Site 2: https://bavet.eu/
This website is about the restaurant and what they offer through a very effective webpage. The colours of redand off-white are inspired by their specialty dish, pasta. In the whole website, they use san-serif fonts and reutilisetheir logo font for all headings. The images are used to highlight the website’s food and sometimes featurehumour to make it more memorable. Functionality and usability-wise, it is satisfying and simple to view all thecontent with a simple scroll that's organized neatly. A nice interactive touch for the menu splash page washovering over different dishes to see it’s names. The overall performance is seamless. However, the red recordsection is confusing because of it’s lack of context and unnecessary long scroll.
|
| fig 1.1 ocean health index replication page 1 |
|
| fig 1.2 page 2 |
|
| fig 2.1 Morgan Stanley Web Replication page 1 |
|
| fig 2.2 page 2 |
|
| fig 2.3 page 3 |
|
| fig 2.4 page 4 |
|
| fig 2.5 page 5 |
fig 2.6 PDF File
Link to Higher Quality PDF file
Exercise 3
Create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.
fig 3.1 HTML
fig 3.2 CSS
Website Link: Banana Cake Recipe Website
Comments
Post a Comment