Maisarah binti Mohd Sufian | 0358458
Interactive Design | Bachelor of Design (Hons) in Creative Media
Exercises: Web Analysis, Replicate a Website, Creating a Recipe Card
___________________________________________________________________________________
LECTURES
Week 1 - Usability: Designing Products for User Satisfaction
Usability = How effectively, efficiently and succesfully a particular user can utilise a product design in a certain situation. A design's usability depends on how well it's features accomodate users' needs and contexts.
Key Principles of Usability:
1. Consistency
- Ensures the website is coherent and works harmoniously across different elements (headers, footers, sidebars and navigation bars). Includes navigation system, page layout and menu structure, fonts and typography and branding. Examples: Apple, SimeDarby, 153joombas.
2. Simplicity
- Minimized number of steps involved, to use symbols and terminology to make the interface as simple and direct as possible.
3. Visibility
- The more visible an element is, the more likely it is known and used. Users should look at an interface and know what their accessible options are.
4. Feedback
- The result of an interaction, the user should receive signals that they have succeeded/failed at performing a task. E.g. hovering over a navigation item, it will change colour or load a submenu.
5. Error Prevention
- Alerting the user about an error they made to help them not make any mistakes. E.g. Mailchimp/Netlify requires users to type a word to confirm their decision.
Common Usability Pitfalls & How to Avoid Them
1. Complex interfaces
2. Confusing navigation
3. Poor feedback
4. Inadequate error handling
Week 2
This week, we went through the anatomy of a webpage, in class Mr Shamsul grouped us to create a prototype from a list of scenarios. My group was to design a social media app for a specific interest group.
Week 3
Key Elements of Website Structure:
Header
- top section of a webpage, contains the logo, navigation menu and contact info.
- provides quick access to the above.
Body
- main content area of a webpage, contains text, videos, etc.
- readability depends on proper organisation of the content.
Footer
- bottom section of a webpage, includes copyright info, important links and contacts.
- provides closure and additional navigation options.
Navigation Menus
- allow users to move around the website, labels are clear and concise.
- complex sites may use dropdown menus.
Organizing Content
- most important aspect to a well-structured website.
- headings, logical grouping and clearly labeled sections improve user experience.
___________________________________________________________________________________
EXERCISE 1 - Web Analysis
Instructions
We are required to choose 2 websites from these links: https://www.csswinner.com/winners, https://www.awwwards.com, https://www.webbyawards.com and review them, taking note of the design, layout, content and functionality in 500 words. We must identify the strengths and weaknesses, taking into consideration how they impact user experience.
Report
First website: https://fuji.halfof8.com
“Fuji.halfof8.com” is a website based in Japan which stylizes a journal entry of the Yoshida trail at Mt. Fuji. The design and source of journaling are from Anton Sokolov, the background art is by Kri Danilina, while the development of the website is done by PixelJam. The website uses journal content from Anton Sokolov and stylized it with different colors, artworks, animations, and user interface.
On the topic of visual design, the website consists of three variables; color, typography, and imagery. The color palette used in this website is muted, allowing the users to focus on the text and content while also appreciating the pastel colors. The typography is clear and legible with fonts which are easy to read and bold lettering where it is needed. The imagery is the highlight, it is interesting and distinctively Japanese with the Japanese flag being front and center, it aids the users in understanding the contents of the website. The design methods used for the website are unique and stand out from other websites promoting or depicting a location.
Furthermore, the quality of content for the website also consists of three variables; accuracy, clarity, and organization. The pieces of information presented in the document are all accurate, there are no extra or irrelevant pieces of information, everything is concise. The content presented is also clear and easily digestible with a clear structure of information from the first journal entry to the last. Altogether, the quality of content is aptly accurate, concise and well-structured.
Moreover, the performance of the website also depends upon three variables of itself; load times, responsiveness, and compatibility. The loading times are not slow, neither fast, however it is noticeably slower on mobile phones. There is also a very slight delay in the website’s responsiveness specifically when scrolling up and down. The website is compatible with smaller windows and mobile, majority of the content in this report is based on the website’s performance on Opera browser on PC, the other browser which was tested was Safari for IOS. Conclusively, the performance of the website is well done with a few drawbacks in performance and responsiveness.
Lastly, the factor of user interface depends on navigation and interactive elements. The navigation is the worst aspect of the website as it is confusing because not all elements are clearly labeled such as arrows and toolbars. However, this website uses many fun interactive elements, such as when holding the mouse down, a screen of stamp illustrations appears. As the user reads through each journal entry, it follows up the flag with the corresponding stamps collected being highlighted and an illustrated path. Overall, the website’s user interface is mostly appealing due to the interactive elements, but dragged down by the navigation methods.
In conclusion, “Fuji.halfof8.com” is a well-designed website which boasts good quality of content through great visual design and imagery and performance which is mostly well-done. It gives the users appealing designs to admire and fun interactive elements while reading through the information provided.
Second website: https://phq.nz
“PHQ.nz” is a website for a New Zealand creative agency which deals with digital media creators, it has many collaborators from brands such as Google and Sony Music.
The layout of the website is determined with different points; color, typography, and imagery. The colors of the website are not that broad and do not have any variety other than black and white, however, that choice itself offers striking visuals which give good contrast. The style of fonts chosen and the size of them are clear and readable with apt spacing between them. Lastly, the imagery is striking and unique, specifically the logo with a glaring source of light behind it coupled with a motto is effective and stylish. Conclusively, the layout of the website escapes being bland even though it only has a short palette of colors.
Content for the website is also based on three other aspects; accuracy, clarity, and organization. All texts are shown accurately with no extra information needed. Information is also clear and concisely given. The texts and menus are also organized and spaced effectively which provide the reader with apt information. Overall, the content for the website is well-managed with great accuracy, clear texts, and useful organization.
The performance of the website is also important and depends on a few variables; load times, responsiveness, and compatibility. On the desktop, there is almost no delay for the website loading and loading in each section for the website. As for the responsiveness, it is very responsive, especially with the cursor on desktop guiding animations and such. While testing on Opera browser on desktop, the site worked perfectly with no issues, however, with the mobile version, it does not perform as well, with longer load times for different sections and animations being sub-par or non-existent compared to desktop. Overall, the site performs perfectly as intended on desktop but falls behind extensively on mobile.
The user interface is an important aspect of the website and can be drawn to two factors; navigation and interactive elements. All elements and toolbars are clear and easy to navigate while also maintaining style of overall visual design. The main interactive element is the source of light behind the background logo which is controlled by the cursor, it creates an elegant ambience within the site. Other interactive elements are also controlled by the cursor as a batch of files appear when hovering above the “Our Work” section of the website which is fun to observe and control, animations also appear for some sections of the website when hovering with a cursor, although those are more mundane. Conclusively, the user interface is a great factor for the website as its expert navigation and creative interactive elements provide a fun user experience.
In conclusion, the website falls short and loses many of its positive aspects on mobile, but on desktop it boasts several great design choices such as fun interactive elements and stylish fonts which create an enjoyable ambience for users.
EXERCISE 2 - Replicate A Website
Instructions
For this exercise we are required to replicate 2 out of 3 given websites in Illustrator/Photoshop. We may use similar images and fonts from Pexels/Google fonts. The main focus should be on the layout, type style and colour style. Mr Shamsul wants us to mainly use Illustrator.
I chose to replicate these two sites:
- https://www.oceanhealthindex.org/?authuser=0
- https://www.morganstanley.com/?authuser=0
1. Ocean Health Index
I first imported a full screenshot of the webpage in Illustrator as a template and started on the background as well as sourcing the images from Pexel and Freepik. I chose colours using the eyedropper tool.
Then, I moved on to adding text and icons. The font I used that was most similar to the website's is Arial.
2. Morgan Stanley
I repeated the same process with this website, however looking for the fonts and images were a bit trickier. I used a combination of fonts which were Ninca for most of the headings/title and Prelo for the body.
EXERCISE 3 - Creating a Recipe Card
Instructions
For this exercise we must create a recipe card using Adobe Dreamweaver, which is to be uploaded to Netlify. We must seperate our css style sheet and html coding. The goal is to design a basic webpage, displaying the ingredients and instructions in a visually appealing format, and the chose recipe should come from this website: https://www.101cookbooks.com/?authuser=0
I chose to do this thousand layer lasagna recipe: https://www.101cookbooks.com/best-lasagna/
1. HTML
I first started on my html coding. I mostly seperated the styles onto the css stylesheet, with the exception of the floating images, as I could not get them to work no matter which method I tried.. I also noticed that there was a horizontal scroll bar when I previewed by webpage in browser, so I added extra coding to fix that.
2. CSS Stylesheet
I continued to work on the css styles in the same file, and once I was done I pasted it on to a seperate stylesheet and removed it from the original html coding.
Final link: https://maisrecipesite.netlify.app/
___________________________________________________________________________________
FEEDBACK
Week 1:
No feedback given
Week 2:
No feedback given
Week 3:
No feedback given
Week 4:
No feedback given
___________________________________________________________________________________
REFLECTION
Experience
Classes were conducted effectively and Mr Shamsul explained to us clearly on what the task was and what we are required to do, there were sufficient materials for us to refer to. Overall completing theses exercises was simple.
Observation
I realised that almost every aspect of a website has a function and is taken into consideration when being designed. There is not one part of it that is to be taken lightly and overlooked as it can easily drag down the usability of the interface. HTML and CSS can be very confusing to look at it, so it's important to organise and structure our code clearly.
Findings
I found that there were a lot of similarities when it comes down to the overall structure of a website, as an interface should be based off a universal standard so that it is user-friendly enough for anyone to use and access. Overall, I learned a lot about the basics of what a website should be and how despite that, there is still room for distinctness and creativity.
Comments
Post a Comment