Interactive Design All Tutorial Exercises
23/4/2024-20/7/2024 Week 1-Week 4
Jie Xuan/ 0356515
Interactive Design/ Bachelor of Creative Media/Taylor's University
Task 1 Exercises: Web Analysis, Replicate a Website, CSS Layout Model
TABLE OF CONTENTS
1. Lectures
2. Instructions
4. Feedbacks
5. Reflections
LECTURES
Week 1
Week 2
There is no class for this week but we are provided with an article for further reading which is
The Anatomy of a Web Page: 14 Basic Elements.
14 Basic elements that essential for a web page:
1. Header:
Header is the upper (top) part of the webpage. Headers are also referred to as site menus and positioned as an element of primary navigation in the website layout.
2. CTA Button:
A call-to-action (CTA) button is an element of a user interface aimed at encouraging a user to take a certain action. This action presents a conversion for a particular page or screen (for example, buy, contact, subscribe, etc.). Effective call-to-action buttons are easy to notice; designers intentionally create them so that website visitors could see them in split seconds and respond.
3. Hero Section:
Hero section is the above-the-fold (pre-scroll area of the web page containing the element that presents the strong visual hook: a hero image, slider, catchy piece of typography, video, or anything else attracting visitors’ attention and transfers a needed message to them.
4. Footer:
Footer is the lower (bottom) part of the web page which usually marks its end. Being another common zone of global website navigation, the footer provides the additional field for useful links and data users may be interested in finding.
5. Slider:
Slider is an interactive element that applies a technique of a slideshow or carousel to present different products, offers, etc. It is especially popular as a part of e-commerce and business websites to present a sort of gallery of products or services.
Benefit of slider:
- saving space on the page
- user engagement
- attractive visual hook.
6. Search:
Internal search is a functionality that enables a visitor to browse the content inside the website and shows it according to the search query. Tuned correctly, it shows the relevant content, and this way provides the shortcut to what the user needs.
- saves the user’s time and effort
- amplifies usability and desirability of the digital product
- helps retain users
- increases conversion rates.
7. Menu:
The menu is one of the core navigation elements in user interfaces. It is a graphical control that presents the options of interactions with the interface. Basically, it can be the list of commands – in this case, options will be presented with verbs marking possible actions like, for example, “save,” “delete,” “buy,” “send,” etc.
Classic Horizontal Menu:
The most common and well-recognized type of menu which presents the core navigation organized as a horizontal line in the website header, mentioned above.
Slide bar Menu:
Quite a classic type, presents a vertical list of options sticking to the left or right side of the web page.
Dropdown Menu:
A more complex type of menu for content-heavy websites; here, the list of additional options opens below the primary one when it’s clicked or hovered.
Megamenu:
That’s the complex expandable menu in which the big list of multiple choices is presented in a two-dimensional dropdown layout.
Hamburger Menu:
When the hamburger button (typically marked with three horizontal lines) is clicked, the menu expands. This option saves space and is often applied to mobile versions of websites.
8. Breadcrumbs:
Breadcrumbs are navigation elements used to support users in a journey around the website: they get aware of where they are on the website and can get used to the website structure more easily.
- Increase findability
- Fewer clicks needed
- Effective use of screen space
- No misinterpretation
- Lower bounce rate
9. Form:
Form is an interactive element that allows users to send information to the system or server. In a nutshell, it is a digital version of any real paper form we have to fill in to provide someone with the arranged information.
10. Cards:
Cards, also called tiles, are layout elements that help arrange and visualize homogeneous data or content in a scannable and easy-to-use way. Cards are usually organized in a sort of grid, but each card looks like a separate piece in this system.
11. Video:
Video is not a really basic part of a web page, but with the progress of web development solutions and technical abilities, we can find it more and more often on the website of different kinds these days.
12. Progress Indicator:
Progress indicator is a small but helpful element that helps the visitor to understand the current point in the general volume of information or set of actions. It is beneficial on the pages loaded with text content and supposing long scrolling, like long-read articles or guides, for example.
13. Favicon:
Favicon, also known as URL icon or bookmark icon, is a special type of symbol representing the product or brand in the URL-line of the browser and in the bookmark tab.
14.Tags:
That’s another element of secondary navigation level, often found in blogs and websites with plenty of homogenous content. Tag is presented with a keyword or phrase that enables users to jump directly to the items marked up with it.
Week 2 Tutorial Class:
We are divided into groups and each group assigned with a scenario in which we need to design a new interface to solve a particular problem or meet a particular user need.
Each group will need to sketch out their design ideas on papers and will have an individual to test their prototype for usability by having another person act as "users" and attempt to complete a task using the product or interface.
After discussion final outcome:
Week 3
Week 4
Week 5
Extra Mark Up:
ID attribute: It is used to uniquely identify the element from other elements on the page. Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page.
Class attribute: Sometimes you will want a way to identify several elements as being different from the other elements on the page. The class attribute on any elements can share the same value or name.
By default, using these attributes does not affect the presentation of an element. It will only change their appearance if there is a CSS rule that indicates it should be displayed differently.
Block Elements:
Some elements will always appear to start on a new line in the browser window.
It is know as block level elements.
Example: <h1>, <p>, <ul> and <li>
Inline Elements:
Some elements will always appear to continue on the same line as their neighboring elements.
It is know as inline elements.
Example: <b>, <i>, <em>, <a> and <img>
Week 5 Tutorial Class:
This week we have learned about how to create a timetable with the code <table>,<tbody>,<th> and <tr>. Also, we have also explored about row span and column span that allow us to combine the cells of the table. By applying the code, we have created a timetable schedule of the classes.
Week 6
After last week's class that we learned how to create a table, this week we learn how to create a contact form, and also CSS for changing table color.
Here is my work of coding of contact form which Mr. Shamsul has asked us to complete before the class.
Week 7
Week 3- My first encounter on html
Week 4- use html to code table, CSS
Week 5- use CSS add contact form
Week 6- change table color
Week 7- add photo and change the layout
INSTRUCTIONS
Module Information
<iframe src="https://drive.google.com/file/d/11tkUDxzSU9TEbsQo71BUgmD44EUhShG3/preview" width="640" height="480" allow="autoplay"></iframe>
Exercise 1: Web Analysis
Task Requirements:
- We are required to choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
- Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)
Website analysis 1: https://dontboardme.com/
1. Purpose and goal
Based on this website, this is a platform that connects pet owners with trusted pet sitters and caregivers.
The purpose of "dontboardme.com" is to provide pet care services while also building a community of pet lovers who can share their experiences and stories. This combination of practical services and community engagement likely creates a more comprehensive and appealing platform for both pet owners and caregivers.
One of the goal of the website are providing Quality Pet Care Services. The major objective appears to be offering a reliable and trustworthy platform where pet owners can find suitable caregivers for their pets when they are unable to care for them themselves. This could include services such as pet sitting, boarding, dog walking, or other forms of pet care.
Beside that, another goal of the website seems to be fostering a community of pet lovers where they can share their experiences, stories, and tips related to pet care. This community aspect likely enhances the trustworthiness of the platform by allowing users to interact and share their testimonials or recommendations.
2. Visual Design and Layout
On the main page, the menu bar is at the center top. Next, a booking button is located in the upper right corner, facilitating reservations for clients. Furthermore, while on the contact page, users can easily navigate back to the home page by clicking the button positioned at the top left. The company also made it easy for customers to find and get in touch with them by including direct links to their social media accounts on Facebook, Instagram, and TikTok along with the social media icon graphics, located in the bottom left corner.
The website "dontboardme.com" uses light beige, red, pink and blue to create a simple and professional look. Light beige and red is the main color used on the website. It makes everything look contrast, clean and easy to read. This color make the website looks more trustworthy and professional because it is not messy, which is important for a pet care service. Red is used to grab your attention. It's often used for buttons or important information. Red can make you feel excited or urgent, which is helpful for things like booking a pet sitter or finding special offers. Blue is used less often, but it's still important. It's a calming color that makes you feel secure. You might see blue on pages with important information, like the contact page. It helps you trust the website and feel comfortable using it. Overall, the colors on "dontboardme.com" are chosen carefully to make you feel like the website is professional, trustworthy, and important.
Adding dog illustrations to the website brings a delightful and playful touch, bringing happiness, especially to the users. The site features with delightful illustrations of dogs and a wide variety of dog photographs, all of it making the site charming and attractive.
The fonts used for "dontboardme.com" are mostly Neue Montreal and Bayon, and the simplicity is intentional. This choice helps to create a design that is easily readable and visually clear. This website used big fonts size and bold fonts to attract audience. The website makes sure users can quickly engage in information without being distracted by using simple typefaces. This method improves the user experience by speeding navigation and facilitating the application of content.
However, it is difficult to comprehend the content on the service page because of the small font size, all uppercase letters, and whole paragraph visual looks too packed so it is hard for the audience to read. While the website mostly shows it's about pet services, it's not clear about the specific services provided. Users might find it hard to understand what services are available and their benefits. Also, images blocking text on the website could make it tough for visitors to read and understand.
3. Functionality and Usability
The website's navigation, with menu bars placed at the top of the page, improves usability by offering clear and user-friendly options. With clearly labeled categories, users can easily locate information and access additional details. This setup ensures intuitive get to to different sections or pages, improving the overall usability of the site.
Moreover, the forms for booking pet care services are designed to be user-friendly, guiding clients through the process step by step. Clear instructions are provided to avoid any confusion and ensure that users input all necessary information correctly.
4. Content Quality & Relevance
The website provides clear information about pet care services and include customer testimonials. It's well-organized and easy to understand, helping users navigate efficiently. This website have very detail service information like pricing and schedules is available, but updates are uncertain, potentially leading misunderstand information. Regular content review is advised for accuracy. Additionally, the blog offers helpful pet care tips, showcasing the website's commitment to pet health and the professionalism of its providers. This valuable content attracts visitors, builds trust with pet owners, and enhances business sustainability.
5. Performance
This website performs really well in terms of loading times, responsiveness, and working well on different devices and browsers. It loads quickly and smoothly, although how long it loads can depend on your internet connection and what device you're using. Images might load at different speeds on different devices. The site adjusts well to different screen sizes and resolutions, making sure it looks good whether you're on a desktop, laptop, tablet, or smartphone. However, the layout might change a bit depending on the device, and on phones the text can look too big, making the pages a bit messy. Overall, it's a good website and worth using.
view on computer
view on mobile phone
Website analysis 2: https://www.yulia.world/
1. Purpose and goal
The website "Yulia World" clearly communicates its purpose as a platform showcasing and selling unique, flower-inspired fancy dresses. The collection, named "If I were a Flower", suggests an artistic approach to fashion, aimed at customers looking for high-end, custom-made dresses. These dresses are custom-made and of very high quality. They're perfect for people who love unique, beautiful clothes.
2. Visual Design and Layout
The color scheme the creator have mainly used in the website are black and pink. The color is soft and complementary to the floral theme. The color on this website all are very bright color and can make a contrast on this website is because the background of this website is black or white color and the font is pink. So, when audience look at the website mainly focus on the dresses name the dress photograph..
Micky font and Inter font are be used in this website only. Typography is modern and well-spaced, enhancing readability and aesthetic appeal.
The image are big and clear. Image are with the words it make so much focus on her dresses design.
The site uses a minimalistic and elegant design with a focus on large, high-quality images that highlight the intricate details of the dresses.
3. Functionality and Usability
Navigation is straightforward, with a simple menu linking to the dress collections, about the designer, and preorder information.
The site supports interactive elements like a pre-order form, although the error handling message suggests potential issues with form submissions.
The interactive elements is the transition when I move my mouse the home webpage the people who wearing a dress started to move from left to right with different dresses.
4. Content Quality & Relevance
The content is relevant and focused on the designer’s creations and vision. The descriptions are poetic and match the artistic theme of the collections. However, more detailed information about the garments and the design process might enhance understanding and engagement.
5. Performance
The website loads images and transitions smoothly, indicating good performance. It appears to be responsive, adapting well to different screen sizes, which suggests compatibility with various devices and browsers. Overall, Yulia's World effectively showcases its unique fashion line through a well-designed and functional website, though improvements in interactive elements and detailed content could further enhance user experience.
view on computer
Exercise 2: Web Replication
Web Replication 1: Morgan Stanley
Exercise 3: Recipe Card
HTML:
CSS:
Final Outcome:
FEEDBACK
General Feedback: We need to make sure all the images have been fully loaded out when taking the full size screenshot of the web page.
REFLECTION
Experience
Observation
Findings
Comments
Post a Comment