INTERACTIVE DESIGN - EXERCISES
22/4/2023-10/6/2023 (Week 01-08)
Chan Suet Yee 0358427
Bachelor of Design (Honours) in Creative Media
Interactive Design | GCD60904 | Sec 04
Exercises 01 - 03
LIST
TABLE OF CONTENTS:
LECTURES
USABILITY
Definition :
- Effectiveness, efficiency and success of a user in utilising a product or design
- A component of UX design
- Second level of UX design
- Depends on :
- How well features accommodate user's needs and contexts
- Users should easily navigate through an interface to achieve objectives without expert knowledge
- High usability interfaces guides users through to the easiest route to accomplish goals
Principle of Usability :
- Consistency
- Crucial for both visual elements and functionality
- Coherent look
- Ensure harmony across all elements
- Includes :
- Headers
- Footers
- Sidebars
- Navigation bars, etc...
- Consistency aids user recognition and learning
- Avoiding frustration
- Example :
- All button should maintain a consistent design
- Simplicity
- Users Interfaces should prioritise simplicity
- Minimise steps
- Use symbols and terms that are easily understandable
- Reduce mistakes
- Faster goal achievements
- Improve user experience
- Visibility
- The more visible an element, the more likely users will know and use it
- Importance of visibility :
- When something is out of sight, it becomes difficult to know and use
- Users should understand interface options and access them just by looking at the interface
- Feedback
- Communicates interaction results, making them visible and understandable
- Purpose :
- Signals to the user success or failure in task performance
- Example :
- Hovering over navigation items on desktops laptops, expecting colour changes od submenu loading
- Error Prevention
- Alerts user when making errors to facilitate ease of task completion
- Human ability :
- Acknowledge that humans are prone to making mistakes
- Intentions :
- Aims to make tasks easier for users by minimising errors
- Importance :
- Recognises the significance of error prevention due to inherent fallibility
INSTRUCTIONS
EXERCISE 01
[ WEEK 01 ]
INSTRUCTIONS
We were required to choose 2 websites from the link provided by Mr Shamsul. We need to review the website that we've selected, taking note of its design, layout, content, and functionally. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. We need to write a brief report summarising our findings and recommendations.
WEBSITE 01 - MODDEN
Visual Design & Layout
The "MODDEN" website, a design studio based in Los Angeles, effectively communicates it purposes and goals through its visually engaging design and clear messaging.
The bold font used for the studio's name at the top of the home page immediately grabs attention, while the navigation bar provides easy access to essential pages. The homepage's central phrase succinctly describes the studio's focus and services, supported by image showcasing their work.
Fig 1.0 Home Page of the MODDEN website
The website's visual design is minimalist yet engaging, utilising different fonts and animations to highlight key elements without filing cluttered. The use of a pixel mouse cursor and unexpected button outcomes adds an element of fun, aligning with the studio's agenda,
Fig 1.1 Small interactive features in the homepage of the MODDEN website
Functionality & Usability
The websites effectively presents the studio's projects on the "work" page, allowing users to access details conveniently without navigating away.
They layout design of the "info" and "contact" pages maintains consistency, though enhancements in text readability such as reducing negative space and increasing font size are warranted.
The navigation system is intuitive, and interactive elements are well-utilised across the website.
However, refinement of animation speed on some of the text could enhance the overall user experience.
Fig 1.2 "work" page, "info" page and "contact" page of the MODDEN website
Quality & Relevance
The websites effectively conveys the studio's purpose and services with clear messaging and visually appealing design. Relevant content is well-organised, providing users with essential information about the studio's background, services and portfolio. The use of images effectively showcases the studio's work and enhances the overall user experience.
However, there's room for improvement for the readability of the body text on the "info" page to ensure clarity and accessibility for all users.
Website Performance
Overall, the website performs well with short load times and smooth functionality across devices and browsers. Users can access the website seamlessly, and interactive elements work as expected. The responsive design ensures an optimal viewing experience on different devices, enhancing accessibility for users. However, attention to detail, such as optimising text readability and refining animation speed, could further improve the overall experience of the website.
WEBSITE 02 - JUSTINE SOULIE PORTFOLIO
Visual Design & Layout
The homepage features a simple and straightforward design, with a focus on showcasing the designer's projects through images. The swipe left and swipe right interaction for navigating through the projects enhances user engagement and provides a seamless browsing experience. The use of visuals, particularly illustrations, creates a visually appealing and immersive environment, evoking a storybook vibe that aligns well with the designer's focus on motion and illustration.
Fig 1.3 Home page of the Justin Soulie portfolio wesite
The about page also follows a simple layout with concise text and interactive features. The interactive circle adds an element of interactivity and fun to the page, while the background changes based on user interaction create a dynamic and engaging experience.
However, the about page could be improve by providing more in-depth information about the designer to give users a better understanding of her background, skills and experiences.
Functionality & Usability
The swipe navigation on the homepage makes it easy for user to browse through the projects quickly and intuitively. The "next" button at the end of each projects allow users to seamlessly transition to the next project without having to go back to the homepage, enhancing usability.
The interactive features on the about page such as the mouse movement and click interactions, add an element of engagement and playfulness. However, the purpose of these interactions could be clearer to ensure users understand how to interact with the page effectively.
Quality & Relevance
For the visual content, the use of high quality images and illustrations effectively showcases the designer's portfolio and aligns with her focus on motion and illustration. The visual content is relevant to the designer's expertise and provides insight into her skills and style.
The text content on the about page is concise and to the point, providing basic information about the designer. However, as mentioned, adding more in-depth information could enhance the quality and relevance of the content, giving users a better understanding of the designer's background and expertise.
Website Performance
The website boasts swift loading time, ensuring a seamless user experience. Its performance remains consistently smooth across various devices, guaranteeing accessibility and usability for all users, regardless of the device they use to access the site.
EXERCISE 02 - Web Replication
[ WEEK 03 ]
INSTRUCTIONS
We were required to replicate two existing main pages of the websites given by our tutor to gain better understanding of their structure. We have to choose any two from the link given. Follow the dimensions of the existing websites from the width and height.
This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.
We can use any image from stock image and free stock icon. The image does not have to be an exact image from the original website, we can replace it with a similar image. We need to focus on the layout, type style and colour style.
Website 01 : Bandit
Process
Fig 1.4 Bandit website replication process (Adobe Illustrator)
Fig 1.5 Bandit website replication process (Adobe Illustrator)
Fig 1.6 Bandit website replication process (Adobe Illustrator)
Fig 1.7 Bandit website replication process (Adobe Illustrator)
Fig 1.8 Bandit website replication process (Adobe Illustrator)
Fig 1.9 Bandit website replication process (Adobe Illustrator)
Final Outcome
Fig 2.0 Final Bandit Website Replication
Website 02 : Morgan Stanley
Process
Fig 2.1Morgan Stanley website replication process (Adobe Illustrator)
Fig 2.2 Morgan Stanley website replication process (Adobe Illustrator)
Fig 2.3 Morgan Stanley website replication process (Adobe Illustrator)
Fig 2.4 Morgan Stanley website replication process (Adobe Illustrator)
Fig 2.5 Morgan Stanley website replication process (Adobe Illustrator)
Fig 2.6 Morgan Stanley website replication process (Adobe Illustrator)
Final Outcome
.jpg)
Fig 2.7 Final Morgan Stanley Website Replication
EXERCISE 03
To complete this task, We need to create a visually appealing recipe card webpage using HTML and CSS. We have to select one recipe from the provided link and follow these steps:
- Create an HTML file named "index.html"
- With sections for the recipe title, an image
- A list of ingredients
- Step-by-step instructions
- Element selectors (e.g., body, h1, ul)
- Class selectors (e.g., .recipe-title, .ingredient-list)
- ID selectors (e.g., #instructions)
Process
I began by browsing through the link provided by Mr. Shamsul to explore the available recipes. After reviewing the options, I decided to create a recipe card for David Lebovitz's Great Chocolate Chip Cookies.
Fig 2.9 Process of creating a recipe card (chosen recipe)
Next, I gathered all the important information from the chosen recipe and started writing the HTML code for my recipe card in Adobe Dreamweaver.
Fig 3.0 Process of creating a recipe card (HTML file)
Afterward, I created an external CSS file and wrote the CSS code to customize the font type, color, size, and background color. Additionally, I added a container with a maximum width of 600 pixels to ensure the recipe card looks neat and organized.
Fig 3.1 Process of creating a recipe card (HTML file)
Fig 3.2 Process of creating a recipe card (outcome after attached the css file to the html file)
Finally, to make my recipe card more visually appealing, I added images relevant to the text, enhancing the overall presentation.
Fig 3.3 Process of creating a recipe card (HTML file)
REFLECTION
Exercise 01
Analysing website design has revealed key factors for users friendly experiences: visual appeal, intuitive navigation, relevant content and smooth performance. This process deepened my understanding of effective design principles and emphasise the importance of prioritising user needs.
Exercise 02
Replicating two main pages of existing websites was a valuable exercise that significantly enhanced my web design skills. By focusing on layout, typography, and color schemes, I gained a deeper understanding of how these elements contribute to the overall user experience. Carefully replicating the layout improved my appreciation for hierarchy and spacing, making navigation intuitive and user-friendly. Matching the original type styles improved my ability to select appropriate fonts and manage text spacing, ensuring readability and cohesive design. This hands-on experience provided practical knowledge that will enhance my ability to create effective and engaging web designs.
Exercise 03
Creating a visually appealing recipe card webpage using HTML and CSS was an enriching experience that deepened my understanding of web development and design principles. Structuring the HTML content into clear sections highlighted the importance of semantic elements for better organization and readability. Applying CSS rules, including element, class, and ID selectors, allowed me to style different parts of the card effectively, enhancing its visual appeal. Experimenting with fonts, colors, and spacing helped in creating an attractive design while ensuring readability and functionality. Overcoming challenges such as responsiveness and maintaining a balance between aesthetics and usability further solidified my skills. This hands-on exercise provided valuable insights and practical knowledge that will undoubtedly benefit future web development endeavors.
Comments
Post a Comment