INTERACTIVE DESIGN [ EXERCISES ]
24.04.24 - 10.06.24 / Week 1 - Week 8
Bachelor of Design (Hons) in Creative Media / Interactive Design / Taylor's University
Exercises
OUTLINE
Instruction
- Exercise 1: Web Analysis
- Exercise 1: Design a platform
- Exercise 2: Replicate a website
- Exercise 3: Creating a Recipe Card
Reflection
INSTRUCTION
Module Information Booklet (MIB) of Interactive Design
<iframe src="https://drive.google.com/file/d/1xs_1Oul1eI2COsIo2W3eILWqBWQTsykD/preview" width="640" height="480" allow="autoplay"></iframe>
Exercise 1: Web Analysis
Lecture note for W1
Choose TWO (2) websites from the link given. Review the website 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 colour, 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, 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).
The site I chose 1: https://wlt.design/
The site I chose 2: https://brand.docusign.com/color
A comparison report of WLT Design and DocuSign Brand
Introduction
This report aims to compare two websites, WLT Design and DocuSign Brand, in terms of their features, functionalities, usability, user experiences, quality, and relevance to performance. Comparisons will help users make informed decisions about their preferences and usage by identifying the pros and cons of each site.
Design and Layout
The first aspect to consider in the comparison is the design of the two brands' websites.
WLT Design's website demonstrates exemplary and creative attention to design details, creating a beautiful and usable whole. The design effectively communicates the nature of the organisation and intelligently serves the communication objectives. It creates a visually appealing and easy-to-navigate website. On the first, pageusers see when they enter, there is a small hole in the light and the sentence "Elevate Your Digital Presence," which intrigues users and raises their curiosity about what to show. The menu bar is easily accessible and well-organised, making it easy for users to find the information they need.
On the other hand, DocuSign's website design also strongly attaches to design principles and creates a modern design with a more complex layout. The home page features several sections with different design elements, including images, videos, and text. While the design is visually appealing, cluttered layouts can be overwhelming for some users. However, the menu bar is like the site of WLT Design, allowing users to navigate to the information they want.
Content
Both websites have well-written and informative content. WLT Design's website focuses on showcasing its services and expertise with concise and clear descriptions. A portfolio is also available, so users can understand what they have been doing. However, some users may feel that they lack the medicine of information they can find.
Docusign Brand's website, on the other hand, has a more extensive range of content, including an introduction video, a press kit, and brand guidelines. This allows users to get a lot of information about Docusign, but in the case of brand guidelines, a huge amount of information can burden users. Also, in the case of this press kit, it can be cumbersome to go to another site and retrieve the information again.
Use of Colour, Typography, and Imagery
WLT Design's website uses a simple colour palette centred on orange and also uses white and black. The orange-centred colour gives you a warm, comfortable, and consistent feeling. Also, the pages with white and black additions create a professional feel. The use of imagery is extensive, with a mix of photos and 3D illustrations. While the images are high-quality, some may feel overwhelming due to their abundance. The typography has a neat font that is easy to see, unlike dynamic moving images.
In comparison, Docusign Brand's website uses a more vibrant colour palette of blue, white, and orange. The colour scheme is consistent throughout the website, creating a cohesive and professional look. The use of imagery is limited but effective, with high-quality images that complement the overall design. The typography is also well-chosen, like WLT Design, with a clean and easy-to-read font, unlike the complicated design.
Functionality and usability
Both websites have a high level of functionality and usability. WLT Design's website has the same good functionality and usability as the menu button at the top, allowing users to quickly access the information they want. There is also a page where users can send messages directly, allowing them to interact and communicate with other users. Docusign Brand's website also has a menu button at the bottom right, making it easy to see the information you want to see. However, even with menus, the site's cluttered layout and unique formatting background can make it a little difficult to navigate. In addition, the only interactive element is email, which may make some users uncomfortable.
Performance
In terms of performance, both websites load quickly and are responsive. WLT Design's website has good load times, considering the amount of content and design elements present.
However, Docusign Brand's website also has good load times; it may take some time to click on Brand Guidelines or Press Kit. Users will feel uncomfortable, especially as it tends to take a long time to reach Brand Guidelines.
Conclusion
In conclusion, both WLT Design and DocuSign Brand have well-designed and functional websites. While WLT Design's website has a cleaner and more user-friendly design, Docusign Brand's website offers a wider range of content. Both websites have good features and performance, so they are easy to use and navigate. Ultimately, the choice between the two websites may depend on the user's personal preferences and specific needs.
(746 letters)
Exercise 1: Design a platform
To accomplish this activity, students were divided into 4 groups and discussed the scenarios given in each group. My group was group 2. and the scenario given to us was scenario 2 from Lecture Note W1.
Scenario 2:
- You are tasked with designing a new social media platform for a specific interest group, such as fans of a particular TV show or hobby.
- User needs: Users want a platform that is easy to use, with clear communication and sharing features, and a sense of community among other users.
- Usability principles to consider: Consistency, Simplicity, Feedback, and Error prevention.
First of all, our group decided to design a social media app where drawing artists can gather, post pictures, and communicate with each other. So we drew each page by referring to various social media apps such as Instagram and Art Station.
 |
| Fig. 1.2.1 Planning process 1 (Week 2 / 2.5.2024) |
 |
| Fig. 1.2.2 Planning process 2 (Week 2 / 2.5.2024) |
 |
| Fig. 1.2.3 Planning Process 3 (Week 2 / 2.5.2024) |
 |
| Fig. 1.2.4 Drawing page 1 (Week 2 / 2.5.2024) |
 | |
|
 |
| Fig. 1.2.6 Drawing page 3 (Week 2 / 2.5.2024) |
 |
| Fig. 1.2.7 Drawing page 4 (Week 2 / 2.5.2024) |
 |
| Fig. 1.2.8 Drawing page 5 (Week 2 / 2.5.2024) |
 |
| Fig. 1.2.9 Drawing page 6 (Week 2 / 2.5.2024) |
 |
| Fig. 1.2.10 Drawing page 7 (Week 2 / 2.5.2024) |
 | |
|
Exercise 2: Replicate a website
Lecture note for W3
We were tasked to replicate two existing main pages of the websites which the lecturer gave in the Google Classroom.
Requirements:
- Follow the dimensions of the existing website from the width and height.
- Use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. (may replace it with a similar image)
- Focus on the layout, type style, and colour style. To find similar typefaces/fonts.
Site 1
 |
| Fig. 2.1.1 Site 1 that I chose (Week 3 / 9.5.2024) |
After deciding on the site, I first found and placed the font as similar as possible to the original website's font.
 |
| Fig. 2.1.2 Process 1 (Week 3 / 9.5.2024) |
First, I had to choose the most main-looking photo, but as the website is related to an investment bank in New York City called Morgan Stanley, I decided to use colour around green dollars. I thought it was simple, but I liked it because it was intuitive.
 |
| Fig. 2.1.3 Process 2 (Week 3 / 9.5.2024) |
 |
| Fig. 2.1.4 Process 3 (Week 3 / 9.5.2024) |
 |
| Fig. 2.1.5 Process 4 (Week 3 / 9.5.2024) |
After roughly organising the top, I decided to change the sign-up part which was disturbing at first. It had a simple design that I originally thought about, so I was able to finish it pretty quickly.
 |
| Fig. 2.1.6 Process 5 (Week 3 / 9.5.2024) |
Then I did the part located at the top, which took me a while to start with. So I changed the feel by using the layout of the original website a little bit.
 |
| Fig. 2.1.7 Process 6 (Week 3 / 9.5.2024) |
 |
| Fig. 2.1.8 Process 7 (Week 3 / 9.5.2024) |
 |
| Fig. 2.1.9 Process 8 (Week 3 / 9.5.2024) |
Fig. 2.1.9 was done in the classroom and tried to finish it that day, but it stopped in the middle because there were many other tasks. So later, I finished Site 2 first and started designing Site 1 again.
 |
| Fig. 2.1.10 Process 9 (Week 4 / 15.5.2024) |
At first, I thought of a design that revealed as many greens as possible to match the entire colour of the website I was designing, but then I changed the design slightly because it didn't seem to match the photos I chose.
 |
| Fig. 2.1.11 Process 10 (Week 4 / 15.5.2024) |
 |
| Fig. 2.1.12 Process 11 (Week 4 / 15.5.2024) |
After finishing the 'Recent Insights' part, I proceeded with the 'Discover who we are' part which looked the most difficult. It was difficult to come up with a new neat design while moving everything from the original website.
 |
| Fig. 2.1.13 Process 12 (Week 4 / 15.5.2024) |
 |
| Fig. 2.1.14 Process 13 (Week 4 / 15.5.2024) |
 |
| Fig. 2.1.15 Process 14 (Week 4 / 16.5.2024) |
I slightly changed the design of the 'More Insights' part, because the elements floating on the picture looked a little unnatural.
 |
| Fig. 2.1.16 Process 15 (Week 4 / 16.5.2024) |
 |
| Fig. 2.1.17 Process 16 (Week 4 / 16.5.2024) |
 |
| Fig. 2.1.18 Process 17 (Week 4 / 16.5.2024) |
Fig. 2.1.19 Site 1 Final PDF (Week 4 / 16.5.2024)
Site 2
 |
| Fig. 2.2.1 Site 2 that I chose (Week 3 / 9.5.2024) |
I originally wanted to switch to a picture related to another clean ocean rather than the main picture at the top of the website. So I edited the two pictures below to make a picture that I liked and made a new one. I used Adobe Photoshop to edit these pictures.
.jpg) |
| Fig. 2.2.2 Picture 1 (Week 3 / 9.5.2024) |
 |
| Fig. 2.2.3 Picture 2 (Week 3 / 9.5.2024) |
 |
| Fig. 2.2.4 Picture 1 and 2 edited picture (Week 3 / 9.5.2024) |
As the lecturer said, I tried to change the colour or atmosphere while maintaining the shape of the original site as much as possible.
 |
| Fig. 2.2.5 Process 1 (Week 3 / 9.5.2024) |
 |
| Fig. 2.2.6 Process 2 (Week 3 / 9.5.2024) |
I thought the original design of the site was a little distracting, so I tried to make it a little neat.
 |
| Fig. 2.2.7 Process 3 (Week 3 / 9.5.2024) |
After roughly changing the top, I used a site called Freepik to change the social media icon below. Then I changed the colour to Photoshop to match the colour of the site I was designing.
 |
| Fig. 2.2.8 Social media icon (Week 3 / 12.5.2024) |
 |
| Fig. 2.2.10 Process 4 (Week 3 / 12.5.2024) |
 |
| Fig. 2.2.10 Colour-changed Social media icon (Week 3 / 12.5.2024) |
After editing the social media icon, I edited the logo with Adobe Illustrator and placed it like the original website.
 |
| Fig. 2.2.11 Process 5 (Week 3 / 12.5.2024) |
 |
| Fig. 2.2.12 Process 6 (Week 3 / 12.5.2024) |
Now that I've also placed the icon, it was time to do about the bottom side, which was the part that changed a lot in the original website design, so it took the longest time to think.
 |
| Fig. 2.2.13 Process 7 (Week 4 / 14.5.2024) |
 |
| Fig. 2.2.14 Process 8 (Week 4 / 14.5.2024) |
 |
| Fig. 2.2.15 Process 9 (Week 4 / 14.5.2024) |
Originally, I was going to give the news part a scrolling effect, but after thinking about it, I decided to give the news part a turning effect and the scrolling effect on the part above. And relation to the news part from the original website, I placed pictures in the news part that match the website I'm designing.
 |
| Fig. 2.2.16 Process 10 (Week 4 / 14.5.2024) |
 |
| Fig. 2.2.17 Process 11 (Week 4 / 14.5.2024) |
As I did it, there seemed to besome empty space, so I added a design around the picture.
 |
| Fig. 2.2.18 Process 12 (Week 4 / 15.5.2024) |
 |
| Fig. 2.2.19 Process 13 (Week 4 / 15.5.2024) |
 |
| Fig. 2.2.20 Site 2 Final website (Week 4 / 15.5.2024) |
Fig. 2.2.21 Site 2 Final website PDF
Exercise 3: Creating a Recipe Card
Lecture note for W4
Lecture note for W5
Lecture note for W7
In this exercise 3, I should create a recipe card using HTML and CSS. The goal was to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.
So I choose one of the recipes from the following site, 101 COOKBOOKS. Among them, I chose a recipe for spaghetti titled Spaghetti with No-Cook Sauce.
 |
| Fig. 3.1 Spaghetti with No-Cook Sauce |
I created an index.html file in Adobe Dreamweaver and started writing the necessary code. I included important elements such as the key images, ingredient lists, and descriptions of the dishes as required by the lecturer. Since I still found some parts of the code challenging, I referred to the recorded lecture videos and sites provided by the lecturer for guidance.
 |
| Fig. 3.2 Process 1 (Week 7, 8 / 8 - 10.6.2024) |
 |
| Fig. 3.3 Process 2 (Week 8 / 10.6.2024) |
 |
| Fig. 3.3 Process 3 (Week 8 / 10.6.2024) |
 |
| Fig. 3.5 Final Recipe Book <---Click here! |
REFLECTION
Experience
When I first started these exercises, most of the group and individual assignments involved analyzing websites or designing them directly. It was interesting because it was my first time doing these tasks, and as time passed, I gradually began to learn about coding, but this part was difficult.
Observations
Analyzing the viewer's perspective when looking at a website was fascinating. It was intriguing to realize that these aspects need to be considered when designing and creating a website. Many points were new to me. However, there were also some frustrating aspects; coding was not easy, so I frequently had to search the internet for additional information beyond the lectures I attended.
Findings
As mentioned above, I learned many important points that need to be considered when designing a website. I realized that it's not just about having a clean design; it's also about ensuring that there is effective interaction with the users who visit the site.
QUICK LINKS
Projects
Comments
Post a Comment