INTERACTIVE DESIGN - Exercises
Edita Chew En Thung / 0357357
Interactive
Design / Bachelor of Design (Honours) in Creative
Media / Taylor's University
Exercises / HTML Document Development & HTML, CSS Document Development,
CSS Layout Model
Table of Content
1. LECTURES
2. INSTRUCTIONS
3. PROCESS
i. ANALYSIS
4. FEEDBACK
5. REFLECTION
LECTURES
fig 1.0 | Lecture Slides
Week 1
Usability: Designing Products for User Satisfaction
What is Usability?
- Usability is how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
- It is a part of User Experience (UX) Design. It's the second level of UX Design.
- A design’s usability depends on how well its features accommodate users’ needs and contexts.
- When users first encounter an interface, they should be able to find their way about easily enough to achieve objective without relying on expert knowledge.
- An interface with high usability that guide the users through its easiest route to achieve its goal.
Key Principle(s) of Usability:
Consistency: Keep things the same throughout the website so users know what to expect. For example, if clicking a button takes you to a new page, it should do the same thing every time you click it.
Simplicity: Make things easy to understand and use. Don't overload users with too much information or options. Keep it simple and straightforward.
Visibility: Make important elements easy to see and find. Use clear labels, buttons and menus so that the users know where to go and what to do.
Feedback: Let users know what's happening, like for example, if they click a button show them that something is happening, like a loading animation. This will help the users feel in control and understand what they're doing.
Error Prevention: Try to stop mistakes before they happen. Use clear instructions and prompts to guide users, and design forms or interfaces to minimise errors. Helping the users have a smooth experience.
Week 3
Understanding Website Structure
It focuses on the essential components and structure of a website, emphasising the importance of organisation in creating user-friendly web designs.
1. HTML Structure: Basic elements like headers, footers, navigation bars, and content sections are introduced, showing how they form the backbone of a website.
2. Navigation: Effective navigation design ensures users can easily find information, highlighting the role of menus, links, and sitemaps.
3. Visual Hierarchy: The arrangement of elements to guide users’ attention, emphasizing the use of size, colour, and placement.
4. Responsive Design: Ensuring websites function well on various devices by adapting layouts and elements.
5. User Experience (UX): The importance of designing for user needs, including accessibility and usability considerations.
By understanding these concepts, students can create well-organized, accessible, and visually appealing websites.
Week 9
CSS Box Model and Layout
Display Property:
Importance: The display property is essential in CSS for layout control.
Default Values:
- Block-level elements**: Elements like `<div>`. They start on a new line and extend to fill the available width.
- Inline elements**: Elements like `<span>`. They flow within the content, not disrupting the line.
Customisation:
You can override default display values to customise layouts, such as making `<li>` elements inline for horizontal menus.
Other Display Properties: Include `inline-block`, `flex`, and `grid` for more complex layouts.
The Box Model
Concept: All HTML elements are seen as boxes with layers: content, padding, border, and margin.
Layers:
Padding: Space between the content and the border.
Border: The border surrounding the padding.
Margin: Space outside the border.
Example:
```html
<div>
<p>This is a paragraph. It is a very short paragraph.</p>
</div>
```
- CSS for the above:
```css
div {
background-color: red;
padding: 0;
border: 1px solid black;
margin: 0;
}
p {
background-color: white;
padding: 1em;
border-width: 10px;
border-style: solid;
border-color: blue;
margin: 10px !important;
}
```
Flexbox:
Overview: Flexbox is a layout model for creating responsive and efficient web layouts.
Key Concepts:
Flex Container: The parent element, set with `display: flex`.
Flex Items: The child elements within the flex container.
Important Properties:
- `display: flex`: Establishes a flex container.
- `flex-direction`: Defines the direction of the flex items (e.g., row, column).
- `justify-content`: Aligns flex items along the main axis (e.g., start, end, center, space-between, space-around).
- `align-items`: Aligns flex items along the cross axis (e.g., stretch, center, start, end).
Conclusion:
Understanding the Display Property, Box Model, and Flexbox in CSS is essential for creating well-structured, flexible, and visually appealing web pages. These tools provide the foundation for designing layouts that are both functional and responsive.
Feel free to experiment with these properties to see how they affect your web designs!
INSTRUCTIONS
fig 1.1 | Module Information Booklet (MIB)
Week 1 We are tasked to analyse 2 existing websites and identify areas for improvement. This exercise will help us develop our critical thinking skills and gain insights into web design best practices. |
EXERCISE 1
Week 1 | Exercise 1 - Web Analysis
PROCESS
ANALYSIS
WEBSITE #1
Website Analysis:
UICONS
fig 1.2 | UICONS Website - first look
Introduction:
UICONS is a website that provides a collection of icons for various
purposes. Their main goal is to give users a convenient platform to discover,
select and download icons for use in their projects whether it be personal or
professional work.
Purpose & Goals:
UICONS effectively communicates with the user in their homepage.
The clear layout and visible search bar immediately conveys that this is a
platform for discovering and downloading icons. Additionally, the
categorisation of the icons and the option to browse by tags, further aid
users in finding relevant icons for their needs. Overall, the website
effectively communicates its purpose and goals to users.
Visual Design and Layout:
UICONS has a
minimalist design with a clean layout, enhancing the focus on the
icons
themselves. The use of white space ensures that icons are easily
distinguishable and accessible. The colour scheme is predominantly neutral,
with
occasional pops of colour used sparingly to draw attention to specific
elements such as buttons or tags.
Typography is clear and easy to read,
contributing to the overall user experience. Imagery is predominantly
icon-based, aligning with the website's theme and purpose. However,
while the design is functional, it lacks a distinct personality or
branding, which could help differentiate UICONS from other similar platforms.
fig 1.3 | UICONS Website small interactive features
Functionality and Usability:
The website's navigation is intuitive and a little interactive as some
graphics in the background were moved along with the cursor.
It also has a simple menu bar at the top providing
easy access to different sections such as Home, Icons, Categories, Tags, and About.
The search bar is displayed visibly,
allowing users to quickly find icons by entering keywords. The
categorisation and tagging systems further enhance usability by enabling
users to explore icons based on specific criteria.
Interactive elements such as hover effects on icons provide a tactile,
minimal use interactive experience, although additional interactive features could further engage users.
Forms, such as the contact or feedback form, are straightforward and easy to
use.
Content Quality & Relevance:
The quality of the icon collection on UICONS is good, an overall high
resolution, with a diverse range of icons available across various
categories and themes.
Icons are well-designed, scalable, and suitable for a wide range of
applications. However, the relevance of content could be improved by
adding more context or information about each icon, such as its intended
use or design inspiration. And it could use more user-generated content, such as ratings or reviews
for icons,
could enhance the relevance and credibility of the collection.
fig 1.4 | UICONS Website Performance & load time
Performance:
In terms of performance, UICONS loads rather quickly and responsively across different devices and
browsers.
The website is optimised for both desktop and mobile use, it gives a seamless experience regardless of the user's device.
Load times for pages and icons are minimal, contributing to a
smooth browsing experience.
However,
ongoing optimisation efforts could further improve performance,
particularly as the icon collection expands over time.
Recommendation(s):
- Develop a more distinct/easy distinguishable brand identity to differentiate UICONS from competitors and enhance brand recognition.
- Enhance the content relevance by providing additional information about each icon, such as its intended use or design inspiration.
- Implement user-generated content features, such as ratings or reviews, to foster community engagement and improve credibility.
- Optimise website performance to make sure a much fast loading time and responsiveness across all devices and browsers.
Conclusion:
Overall, UICONS effectively communicates its purpose and provides a
user-friendly platform
for discovering and downloading icons. With some enhancements to branding,
content relevance, and performance, UICONS has the potential to further
improve the user experience and solidify its position as a leading
destination for icon resources.
WEBSITE #2
Website Analysis: U Music Store
fig 1.5 | U MUSIC STORE Website first look
Introduction:
U Music Store is an online platform selling music-related products, including albums, merchandise, and accessories. Its primary goal is to provide users with a convenient way to discover and purchase music-related items.
Purpose and Goals:
The purpose of U Music Store is effectively communicated to the user upon landing on the homepage. The layout prominently features music products, with clear calls-to-action to browse or shop. However, the specific goals of the website, such as promoting new releases or special offers, could be better highlighted to guide user actions and encourage engagement.
Visual Design and Layout:
fig 1.6 | U MUSIC STORE Website Visual Design and Layout
fig 1.7 | U MUSIC STORE Website Visual Design and Layout (widows/short words or phrases left below)
The website has a simple and modern layout. The use of mostly monotonic colours and high-quality imagery creates a simplistic experience for user browsing. Typography is clear, futuristic and legible, enhancing readability and user engagement. However, the layout could be optimised for better organisation, particularly in showcasing product categories and promotions. Some sections that consists a description is long in terms of the text box length, it was as if it was pulled near to the margin of the website's screen, which the font pairings of the description may make the users detract from the overall experience.
Overall layout is simple and minimalistic modern, very less borders to separate sections, which may seem "too simple" for the user to consider the website as "professional" like a big corporate company, like [Apple] for example, in the eyes of a non-designer, because it lacks the uniqueness and originality.
The homepage is short, too much white space.
Functionality and Usability:
The website's navigation is relatively straightforward, with a menu bar at the top providing access to different product categories and pages such as What's New, Music, Merch, and Artist. Icons that has a login feature, search, and cart icons. However, the navigation could be further improved by implementing breadcrumbs to enhance user exploration and discoverability. Forms, such as the checkout process, are functional but could benefit from streamlining to reduce friction and improve conversion rates. Interactive elements, such as product sliders and hover effects, add dynamism to the user experience but should be used to avoid overwhelming users.
Content Quality and Relevance:
fig 1.8 | U MUSIC STORE Website Content Relevance
fig 1.9 | U MUSIC STORE Website Content Relevance
The product page could use some customer reviews to improve credibility of the product sold.
fig 2.0 | U MUSIC STORE Website Content Relevance
The quality of content on U Music Store is generally high, with product descriptions and clear images providing users with relevant information. However, the relevance of content could be improved by incorporating user-generated content, such as reviews or ratings, to enhance credibility and assist users in making informed purchase decisions.
fig 2.1 | U MUSIC STORE Website Content Relevance (credibility)
Additionally, the content could be organised and refined to ensure a seamless browsing experience, particularly for users seeking specific products or information. But the website indeed has some credibility as they display the brands they have worked with/for.
Performance:
U Music Store loads relatively quickly and responsively across different devices and browsers. However, there may be occasional lags or delays, particularly when accessing certain pages or features. Optimising page load times and overall performance should be a priority to ensure a smooth user experience, especially for users with slower internet connections or older devices.
Recommendations:
- Clearly define & highlight specific goals, like promoting new releases or special offers, to guide user actions and encourage engagement.
- Optimise the layout for a better organisation
- Improve navigation by implementing breadcrumbs or a search bar to enhance user exploration and discoverability.
- The checkout process, could reduce friction and improve conversion rates for overseas buyers.
- Incorporate user-generated content such as reviews or ratings from real-time people/users, to enhance the credibility of the website and help users in making informed purchase decisions.
- Prioritise their performance optimisation to ensure an even faster load time and responsiveness across all devices and browsers.
Conclusion:
U Music Store is a functional platform for purchasing music-related products. With some refinements to their navigation, content relevance, and performance optimisation, U Music Store has the potential to further improve the user experience and become a website with a leading destination for music enthusiasts.
EXERCISE 2
Week 3 | Exercise 2 - Web Replication
PROCESS
Website #1 : OCEAN HEALTH INDEX
fig 2.2 | OCEAN HEALTH INDEX Website replication process (Adobe Ai)
fig 2.3 & 2.4 | OCEAN HEALTH INDEX Website replication process (Adobe Ai)
Step 1: Setting Up the Artboard
I began by opening Adobe Illustrator and creating a new document. I made sure the dimensions matched the layout of the Ocean Health Index front page.
Step 2: Capturing a Screenshot
Next, I took a screenshot of the Ocean Health Index front page for reference and placed it in Illustrator (`File > Place`).
Step 3: Creating the Header
Using the Rectangle Tool (M), I designed the header background. I then added the website’s title and navigation links with the Type Tool (T). I tried to match the font and size as closely as possible by inspecting the webpage’s Design and Layout.
Step 4: Designing the Main Banner
I drew a large rectangle for the main banner area and inserted the background images (`File > Place`). Using the Type Tool (T), I added headings and subheadings, adjusting the font size, color, and alignment to match the original.
Step 5: Creating Content Sections
For each content section, I used rectangles or other shapes and added text boxes for paragraphs and headings with the Type Tool (T). I also inserted images and icons as needed, making sure everything was properly aligned.
Step 6: Footer Design
I designed the footer using the Rectangle Tool (M) and added text, links, and social media icons.
Step 7: Styling and Final Adjustments
I adjusted colours to match the original website using the Eyedropper Tool (I). I fine-tuned the alignment and spacing of elements for consistency and checked for additional details like borders and shadows.
Step 8: Exporting My Work
Finally, I exported my design by going to `File > Export > Export As` and chose the desired file format.
This process helped me better understand website design elements and improved my skills in using Adobe Illustrator.
FINAL WEB REPLICATION 1#: OCEAN HEALTH INDEX
fig 2.5 | Final OCEAN HEALTH INDEX Website replication JPG
Website #2 : BANDIT
fig 2.6 &2.7 | BANDIT Website replication process
fig 2.8 | BANDIT Website replication process
I selected the text on photoshop and copied it to illustrator as pixels to be able to replicate the exact same logo.
fig 2.9 | BANDIT Website replication process
fig 3.0 | BANDIT Website replication process
fig 3.1 | BANDIT Website replication process
fig 3.2 | BANDIT Website replication process
fig 3.3 | BANDIT Website replication process
Step 1: Setting Up the Artboard
I started by opening Adobe Illustrator and creating a new document. I set the dimensions to match the layout of the Bandit website front page.
Step 2: Importing a Screenshot
I took a screenshot of the Bandit front page for reference and placed it in Illustrator (`File > Place`). This helped me align my elements correctly.
Step 3: Designing the Header
Using the Rectangle Tool (M), I created the header background. I then used the Type Tool (T) to add the Bandit logo and navigation links, ensuring the font and size matched the original as closely as possible.
Step 4: Creating the Main Visual
For the main visual section, I drew a large rectangle and placed the background image (File > Place). I added the main headline and sub-headline using the Type Tool (T), adjusting the font size, colour, and alignment to replicate the original design.
Step 5: Building Content Sections
For each content section, I used a combination of rectangles for background shapes and text boxes for content. I added images and icons as needed, aligning them accurately with the original design.
Step 6: Footer Design
I designed the footer by creating a rectangle and adding text, links, and social media icons. I ensured that the layout and style were consistent with the original Bandit website.
Step 7: Refining and Styling
I adjusted the colours using the Eyedropper Tool (I) to match the original website. I fine-tuned the alignment and spacing of elements to ensure consistency and accuracy. I also added any additional details such as borders and shadows.
Step 8: Exporting the Final Design
Once I was satisfied with the replication, I exported my design by going to `File > Export > Export As` and choosing the appropriate file format.
FINAL WEB REPLICATION 2#: BANDIT
fig 3.4 | Final BANDIT Website replication JPG
EXERCISE 3
Week 7 | Exercise 3 - Creating a recipe card
I first started crafting the basic html and named it (index.html) without the css style file first, then worked on the title and heading text. Then, I extracted the important and main information of the recipe I chose from the original website our tutor had provided, a Simple Bruschetta.
I used the following to create the HTML base of the recipe card:
<div class="recipe-card"> to wrap and create the entire recipe card.<h1> tag.<img src> tag.<ul>) and instructions using (<ol>).After that, I entered all the necessary information into the HTML body and started coding for the style of the HTML using CSS.
Started by opening a new css file and named it as style.css and attach it to the same file location as the HTML (index.html) file.
CSS process:
body " is then centered the recipe card on the page..recipe-card class is styled with a white background, rounded corners, and a shadow for a card-like appearance..recipe-title class styles the title, and .recipe-image ensures the image fits well within the card.h2 elements styled to separate sections.Which it looked like this, a good start.
fig 3.5 & 3.6 & 3.7 & 3.8 | HTML & CSS process
At first, when I tried viewing the website, the title couldn't be seen as it cannot be scrolled upwards, it was cropped somewhat. So I cracked my head on this one and researched on why my code was unable to be seen and not working for that area. And Finally, I got my answer to make it fit for all desktops and all orientations.
The changes made:
- I removed "
height: 100vh;"from the body to allow content to expand beyond the viewport height and enable scrolling. - Then I make sure the body's margin and padding are set correctly to prevent content from being cut off.
- The "
box-sizing: border-box;"ensures that padding and borders are included in the element's total width and height. - I used
@mediaquery adjusts the padding and font sizes for smaller screens (max-width: 768px) to ensure readability and maintain layout integrity. - Using
max-width: 100%andwidth: 600pxfor the.recipe-cardensures it scales properly while maintaining a max width of 600px for larger screens.
1st Phase
fig 3.9 | HTML & CSS process (opened to web)
After consulting with my tutor about my progress, he had given me some feedback. It is better if it's not that simple and straightforward, make it interesting, he said.
These are the changed made:
Background Image: Added a background image to the body with background-image: url ('background.jpg'); Changed the recipe card to a slightly transparent card with background-color: rgba(255, 255, 255, 0.9); to allow the background image to subtly show through. Fonts used were the Playfair Display font for titles and headings to give a more aesthetic and elegant look.
After that, my tutor had gave me some more feedback regarding the content, that I should improve and enrich it slightly, which I did afterwards. I had added another heading for "Tips" to give the things to look at when making a simple bruschetta.
FINAL PRODUCT (WEB - RECIPE CARD)
fig 3.9 | HTML & CSS process (opened to web)
background-image: url ('background.jpg');background-color: rgba(255, 255, 255, 0.9); to allow the background image to subtly show through.Playfair Display font for titles and headings to give a more aesthetic and elegant look.
fig 4.0 | HTML & CSS web
EXERCISE 4
Week 9 | Exercise 4 - Layout exercise
PROCESS
FEEDBACK
"Yup. But this is too simple, can make the page look interesting."
"The content can be improved."
"You might want to emphasise certain words that is not the origin language in the document. Words like Baguette, but overall the design now looks better."
NETLIFY LINK: HERE
REFLECTION
Looking back on learning about website usability, it's been a journey of discovery. At first, it felt like a big task, but as I went along, I learned more about how websites work. I learned to look at how they look to users, how easy they are to use or should be able to use, and if the stuff on them makes sense. Thinking about what users might need was important. With practice, I got better at noticing what's good and not so good about websites. Overall, it's been a learning adventure, helping me understand how to make websites better for the user's experience.
FURTHER READING
Website : Anatomy of a Web Page
The article "Anatomy of a Web Page" provides a comprehensive overview of the key components that make up a website. It delves into the fundamental elements of web design, including layout, navigation, content, and visual hierarchy. Through clear explanations and illustrative examples, the article breaks down each component, highlighting its purpose and importance in creating an effective and user-friendly website. Additionally, it discusses modern web design trends and best practices, offering valuable insights for both beginners and experienced designers. Overall, "Anatomy of a Web Page" serves as a valuable resource for anyone looking to understand the essentials of web design and create impactful online experiences.
Comments
Post a Comment