Interactive Design Exercise Web Replication & HTML
24.04.2025 - 08.05.2025 (Week 1 – Week 3)
WANG JINYI / 0374697
GCD61004 / Interactive design / Bachelor of Design (Honours) in Creative Media
Exercises Web Replication & HTML
TABLE OF CONTENT
Lectures
Instructions
Task
Feedback
Reflection
LECTURES
Week 2: Usability
Introduction to Usability
Usability refers to how effectively, efficiently, and successfully a user can interact with a product or system in a specific context. It is a key component of User Experience (UX) design, often considered the second level after overall user engagement. A product’s usability depends on how well its features align with users’ needs and usage environments.
Five Key Principles of Usability
1. Consistency
Maintaining uniform visual elements and behaviors across the product—such as button styles, navigation menus, and layout—helps users predict how things work, which reduces confusion and cognitive load.
2. Simplicity
Try to keep the interface as simple as possible. Avoid extra steps, use clear labels or icons, and make it hard for users to make mistakes. The simpler the design, the faster and easier it is to use.
3. Visibility
Make sure important actions and options are easy to see. Users shouldn’t have to guess where to click or dig through menus to find what they need. Clear visibility supports faster decision-making.
4. Feedback
The system should give clear responses to what users do. For instance, if they click on something, the change should be visible — for example, changing a button’s color when it’s clicked—so users know their actions have been registered.
5. Error Prevention
Designs should help users avoid mistakes before they happen, by offering clear guidance or alerts during interactions. This is especially important because human errors are inevitable.
Common Usability Problems
Interfaces that are too complicated
Confusing or unclear navigation
Little or no feedback when actions are taken
Poor handling of errors
INSTRUCTIONS
.png)
Step 1: Taking a Screenshot
I took a screenshot of the Circora website as a reference for replication.
Step 2: Setting Up the Artboard
I opened Adobe Illustrator and created a web-sized artboard. I placed the screenshot into the canvas (File > Place) and aligned it with the edges of the artboard.
Step 3: Drawing the Website Logo and Header
Using the Ellipse Tool and Pen Tool, I recreated the logo at the top left. Then, I used the Type Tool (T) to add the website title and navigation links, matching the original font and size as closely as possible.
Step 4: Designing the Main Heading Section
I used several rectangles and the Pen Tool to draw the layout for the homepage's main heading area. Then, I added text with the Type Tool and adjusted the font size, color, and alignment to match the original design.
Step 5: Creating Content Sections
For each content section, I used the Ellipse Tool or other shape tools to build the structure. I added headings and paragraph text with the Type Tool and ensured proper alignment. I also sourced relevant images from free stock websites and placed them accordingly.
Step 6: Designing the Footer
I created the footer using the Rectangle Tool and added text and social media icons.
Step 7: Styling and Adjustments
I used the Eyedropper Tool (I) to sample colors directly from the website, making the color scheme more accurate. I also fine-tuned the alignment and spacing of all elements for a polished look.
Step 8: Exporting the Final Design
Finally, I exported the design by going to File > Export > Export As and selected the desired file format.
Step 1: Taking a Screenshot
Following the same approach as with the Circora website, I took a screenshot of the Stauffer website as a reference for replication.
Step 2: Setting Up the Artboard
I opened Adobe Illustrator and created a web-sized artboard. I placed the screenshot onto the canvas (File > Place) and aligned it with the edges of the artboard.
Step 3: Recreating the Logo and Header
Using the Pen Tool, I recreated the logo positioned at the top left corner. Then, I used the Type Tool (T) to add the website title and navigation links, carefully matching the font style and size to the original design.
Step 4: Designing the Homepage Typography
I used the Type Tool to add the main heading and subheading. I adjusted the font size, color, and alignment to closely replicate the original look and feel of the homepage.
Step 5: Building Content Sections
For each content section, I used the Rectangle Tool to construct the base layout and then added headings and paragraph text using the Type Tool. I ensured everything was properly aligned. I also sourced suitable images from free image libraries and placed them accordingly.
Step 6: Creating the Footer
I designed the footer using the Rectangle Tool and added footer text along with social media icons.
Step 7: Styling and Final Adjustments
I used the Eyedropper Tool (I) to sample colors from the website to ensure an accurate color scheme. I fine-tuned the alignment and spacing of all elements for a clean, consistent appearance.
Step 8: Exporting the Final Design
Finally, I exported the completed design by going to File > Export > Export As and selected the required file format.
.jpg)
This exercise gave me a clearer idea of how website layouts are structured and how important each design detail is. Recreating the Circora and Stauffer websites in Adobe Illustrator helped me practice using tools like the Pen Tool and Type Tool, and I also learned how to better match fonts, colors, and alignments.
One challenge I faced was matching the fonts exactly — some of the original typefaces weren’t available, so I had to find similar ones and adjust their size and spacing to get the look as close as possible. Also, aligning every element properly took more time than I expected, but it taught me how much precision matters in design.
Overall, the process helped improve my Illustrator skills and made me pay more attention to structure and consistency in web design. It wasn’t just about copying — it was about really understanding why things were designed a certain way.
Comments
Post a Comment