Interactive Design | Excercises
23/04/2024 - 19/06/2024
Week 01 - Week 08
Wong Jia Yi Carmen (0357198) / Bachelor Of Design In Creative Media
Interactive Design / Exercises | HTML Document Development & HTML, CSS Document Development, CSS Layout Model
INSTRUCTION
fig 1.0 Interactive Design Module Information
Timeframe: Week 01 - Week 08
Deadline: Week 08
Description Class exercises: To show competencies in understanding web development through prototyping and development processes. Students will be provided with basic knowledge of creating and developing Websites. Assessment is done on a weekly basis.
The exercises are as follows:
1. Web Analysis (Week 2)
2. Replicate A Website (Week 3)
3. HTML and CSS Document Development (Week 5)
4. CSS Layout (Week 8)
- Web Analysis
We have to choose 2 websites among 3 given. Review the website and carefully take 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 report in not less than 500 words.
Title: Web Analysis For CSS Winner
Introduction
Nowadays, the virtual space constitutes an exchange for businesses, non-profits, and individuals in the age of digital. There is a constant increase in the importance of websites and the need to track website performance has been increasing rapidly in order to deliver exceptional user experience, engagement, and goals of the business. The purpose of this report is to perform a web analysis of the CSS Winner website with special attention to its effectiveness in capturing customers and discovering its functionality and usability.
User Experience and Functionality Evaluation
When I was on the website, I sensed the availability of the site and cluttering-free features make the interaction smooth. While the delicately chosen colour scheme touched the spot, it mainly helped users to focus and reminded them of the search option, making it easier for them to find the needed content. Among other things, the alternative to selecting either SOTD or SOTM is to explore more winners. Moreover, the dynamic section of the website was classified and this ensured the smooth interaction of the users and allowed them to access the specific information they needed very promptly. The introduction of a sorting filter feature brought about more user convenience by offering personalized user experiences that match individual screens.
fig 1.1 CSS Winner Website Homepage
The website's homepage's display of winners for the day, in a neat and concise way, is a clear message of their dedication to user-oriented services. Additionally, providing the cover and the specific day signs for a hover content box will offer the clarity and context that a user will need. The presence of the voting statistics button is another way of promoting public participation with its dynamic thumbs-up icon for a display of transparency. In the course of exploration, navigating to individual winners' websites proved to be an efficient and effective track. A website's scores that were prominently displayed provided an instant understanding of the website's performance under the critical metrics of design, usability, functionality and content quality. A brief description, which comes as a bar, follows each post over the social network as an illustrative picture. The description of the work of all the winners bolsters the understanding.
fig 1.2 CSS Winner Website's Winner Of 24 April 2024
The abundance of social media sharing options will point to the site's effort to facilitate community engagement and make it possible for the users to share around with their peers and opportunity to promote the website. On the other hand, sorting will not only add colour but also feature-wise system to the system making it possible to display the extensity of the set on one hand and user interests on the other hand. Coming back to the CSS Winner's website, thoroughly informative materials, such as contact details, archives, the terms of conditions, blogs, and certificates, would prove the site's transparency and sure empowerment. Clarity is highly recommended for the process of submitting one's own website in order to boost the active participation of the user and support community integration.
Usability Evaluation and Conclusion
This website in consideration is consistent with the essential usability principles, and hence it is very effective in making the users feel more comfortable. Consistency is achieved by keeping the interface pattern, using a consistent colour theme, and standard alignment of elements and menu making the interface uniform. The uncomplicated navigation pattern meets the goals of simplicity and consistency. Simplicity is the first priority which allows the minimum design along with a clear browsing structure that is good for the user experience too. Important parts are carefully highlighted, so they can be easily viewed from any part of the screen, and immersive widgets are used, that allow the user to give immediate feedback, thus, making the interactive process even more exciting and effective. In addition, design elements and conversation cues have been put in place to help ensure accuracy reducing crises of user errors, thereby creating a sense of confidence and competence among users. To sum it all up, this website has successfully represented 4 principles of consistency, simplicity, visibility and error prevention that would optimize a successful and user-centric browsing environment.
660 words.
Title: Web Analysis For The Webby Awards
Introduction
The Webby Awards is a virtual archive of best practices of innovation, and acting as the pinnacle of human or team struggle, The Webby Awards embodies the essence of champions whose triumphs will eternally be immortalized. Celebrating exceptional feats and accomplishments of individuals and groups becomes the web platform's central mission in the midst of a dynamic. Data entails performance metrics that dent in the site's influence and linkage within the winners and awards realm. In the course of this report, we have a virtual walk-through of the digital hall of fame, covering important issues like how a user engages, how specific content resounds, and the amount of users there is.
Usability, Functionality and The User Experience
The moment I clicked on the website, it immediately popped out a notification about receiving notification from the website and was given an option for users to accept or deny. Furthermore, sign-up options were offered on the lower right corner of the website with vibrant contrast, catching the attention of the users. The website's homepage is straightforward with an uncluttered layout where the winners of their 28th Annual Webby Awards are the focal point and the background scrolling through the profiles of the honorees further enhances their presence. Even though scrolling through this category does not provide any visual alteration, I think that it could be the least attractive section because it requires further changes and developments. Along with this, the website contains a search icon for the convenience of the user's navigation thus enabling the attainment of preferred results. The neatly structured list with names and accompanying award titles makes an opportunity to find the award of interest effortless. Hovered-up signs indicate future interaction and increase activity efficiency. Moreover, category listings have been carefully organized on the side of the page and distinguished by a unique-coloured bullet, which can be easily explored by users to jump from one category to another.
The front page winners also feature links to more in-depth descriptions of the winners and award criteria, allowing users to explore the different award categories and winners at a more detailed level. The details concerning both its background and features that you require to learn can be accessed through this website, showing how reliable it is to provide a user-friendly browsing experience. Furthermore, the website has quick shortcut content which is designed around relevant icons such as quick facts, judging criteria, team details, and recruitment opportunities, thereby offering an added convenience to the visitors.
Sponsor acknowledgements are done with brief descriptions given and clickable links directing to the sponsor's personal website. Information about the website was also offered for the users to find out more about the website. Social Media integration manages the necessary interaction between the users and the website means enlarging the site's coverage and audience. Besides that, features of the website, such as featured members and brand studios, and specific questions and answers, contribute to an overall positive experience of users. Overall, the visual design and layout, classical typography, images and information elements create a very engaging and pleasant user experience. Closely matching not only with smartphone browsers and different browsers but also expanding the range of devices increases the range of the target audience leading to better interaction and satisfaction of users. Summarizing, the site scored high as there was no problem with latency and the site navigated smoothly throughout.
Conclusion
To sum it all up, the numerous functions and content set-up found in The Webby Winner, the success of the website also relies on the fact that it strictly adheres to the general user's requirements. Uniformity and guides make browsing effortless across the platform and make a sleek visual look for users. A clear, straightforward site design lets users easily look upon the core part of the website through the clear look at wards categories and highlighted content without overcomplicating it. Users will find it easier to interact with things like the hover and search features serve to ensure the users on their way are ready for the challenges. The Webby Winners is not only keeping up with its commitments, to deliver award-winning websites but also ensuring a user-friendly platform that continuously makes its audience excited and empowered.
742 words.
Week 2
Today, we did a class activity. Here are the steps:
- Assign each individual with a scenario in which they need to design a new interface to solve a particular problem or meet a particular user need.
- Ask each group to sketch out their design ideas and create a basic prototype using Miro
- Ask each individual to test their prototype for usability by having another person act as a 'user' and attempt to complete a task using the product or interface.
Me and my seatmates were assigned to group 3 and this is our scenario.
Creating a Prototype for a specific problem and being in a position to serve an identified group of users, was the most enlightening and fulfilling process during that time. We all got on a mission that was fueled by creativity and collaboration and finally utilized our ideas using Adobe XD on our side. During the process, I had great thrills of jotting down the ideas and conceptualizing them (brainstorming sessions with my team. We had a multi-disciplinary approach with each team member contributing their personal strengths and views which led to a diversified pool of ideas. It was really interesting to observe how different ways of thinking generated different ways to tackle the same problem. Increasing admiration for technology was influenced by the platform usage with which we easily make our conceptual intangible becoming interactive and eventually more detailed. We were equipped with Adobe XD tools to adjust from simple sketches (wireframes) to high-end designs. These design elements helped us carry out our ideas clearly and that it definitely met the user's needs. Being able to have a look at others’ prototypes presented by the other groupmates was absolutely one of the best things about this occasion. The wonderful ability of my peers showed how they effectively create and explore solutions to certain problems really motivated me. With every prototype, I discovered something new, and these models exposed me to new ideas and perspectives. It was a rich experience across completely new to me and made me think critically in a new way. In general, the time with my groupmates doing this process has been very fun. Lying on top of it was the opportunity to deal with a real problem, to create user needs and also the one that brought the team closer together. This specific project helped me to acquire a new understanding of the significance of cooperation, really help me think outside of the box and also the great value of design as a tool which could be really helpful in making a change.
Week 3
- Replicate A Website
We were to replicate 2 existing main pages of the websites out of 3 given. This exercise helps us to gain a better understanding of their structure.
- HTML and CSS Document Development
REFLECTION
Experience
I've been a bit worried about this module ever since class ended on week 1 after Mr Shamsul briefed us on all the assignments expected in this module. We were already given a task to do which I think was a bit too fast as we only have a week to finish it. Writing 2 reports was definitely something new to me and I have no idea what I should write for the report. I hope all the upcoming weeks it's gonna be okay as I'm scared that I won't be catching up. Learning coding was definitely the most stressful thing for me but at the same time, I had fun learning it. There's still a lot more for me to learn and I'm a beginner at coding as I don't know anything about coding at all and every time I've completed an assignment for this subject, I'm always so happy and proud of myself.
Observations
I think the exercises are a great way for a head start, they make me focus the whole time. Analysing was definitely not easy as it took a long time to finish it. I also learn a lot of new things and they are fun to explore on your own. Watching YouTube tutorials definitely is the most helpful thing ever and I have the freedom to design my own website whatever I want.
Findings
We introduced a new app called 'Dreamweaver' from Adobe and of course, I've never heard of it before and I hope this app was easy to use. HTML coding and CSS layout, three significant insights can be highlighted. HTML is Hypertext Markup Language which is the backbone of web media and offers the meaning of every webpage and formation of web content. For example, the structure of headings from <h1> to <h6> includes a clearly defined hierarchy, and implementation of the paragraph tag <p> and lists such as <ul> and <ol> also improve usability from the user’s point of view and from the SEO point of view. Features like id, class, src, and href enhance properties so that it would be possible to include navigable images, for example <img > or create commanding forms like <form>.
Comments
Post a Comment