Interactive Design：Exercise 2
April 21,2025
ZHOU BOYING / 0369087
02/05/2025 - 12/05/2024(Week 2 - Week 3)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Interactive Design：Exercise
LIST
1. Lectures
2. Instructions
3. Exercises 2
4. Reflections
Lectures
This week, Mr. Shamsul gave us a practical session to guide our progress in Exercise 2: Web Replication. He emphasized the importance of maintaining visual consistency throughout the replication process. During the physical class, he demonstrated how to create accurate block shapes and align elements based on the original website structure. I found this especially helpful when trying to match the layout proportions and spacing precisely. He also reminded us to use tools like Google Fonts and Pexels to find appropriate alternatives for fonts and images when the originals are not available. This hands-on session strengthened my understanding of digital layout construction and improved my technical precision in replication work.
Instructions
Exercises 2
1）Website
1. I Selected the Website: [Website 4: WeMake]
The second website I choose to replicate is Wemake. This is the website that I also analyzed in Exercise 1. It is a design company that focuses on creative construction and digital brand experience. I choose this website because it has a clean style, a rich sense of rhythm, mainly uses green and neutral tones, is more gentle overall than DASS, and is also convenient for practicing another typesetting logic.
2. Replication Process (Adobe Illustrator)
Step 1: Set up the canvas and grid.
I created a new artboard in Illustrator and used horizontal and vertical guide lines to divide columns and blank areas, making the overall structure consistent with Wemake's web page.
Step 2: Navigation bar and main visual area.
I used the rounded rectangle tool to draw the background of the navigation bar, added navigation texts such as "home", "about us", etc., and replicated the top button "let’s talk". The main title "We build without hassle." was placed above a banner image, and two CTA (Call - To - Action) buttons (projects / residential) were added.
Step 3: Project display module.
I replicated the "Our latest and greatest" part, inserted images and corresponding labels (such as "for TKH", "for Atlassian"). I used substitute images with the same style as the original one, and ensured the visual rhythm of the module through alignment and blank control.
Step 4: Middle banner area.
I rebuilt the blue - bottomed question area: "Are you looking to renovate your portfolio?", and added the button "wemake residential" on the right, aligning the entire layout grid.
Step 5: Footer and copyright information.
Finally, I replicated the footer module, including the slogan "Ready to build without the hassle?" and two selection buttons (Yes / Yes, but in green). At the same time, I added contact information, navigation categories, social links and copyright text.
3. Working with Grids and Layers
4. Reflection
Compared with DASS, the Wemake webpage pays more attention to the expression of rhythm and white space. During the replication process, I learned how to maintain a 'sense of order' in a simple visual. This makes me understand the concept of 'less is more' in modern webpage design better. At the same time, I have also improved my ability to use Illustrator tools to control typesetting and proportion.
5. Source File and Submission Link
Google Drive :Link
2）Website
1. I Selected the Website: [Website 5: Dass]
In exercise 1, I analyzed the official website of DASS. It is a creative agency focusing on architectural design, material innovation and brand expression. The reason for choosing this website is that it has a very strong visual recognition, bold use of colors, and a clear grid structure, which is very suitable for web page structure analysis and replication practice.
2. Replication Process (Adobe Illustrator)
Step 1: Set up the artboard and grid.
First of all, I created a vertical artboard in Illustrator so that its proportion was consistent with the original webpage. Then I added horizontal and vertical guide lines to build a webpage grid system. These guide lines helped me maintain consistency and precision when arranging pictures and texts.
Step 2: Rebuild the main visual area.
Use the rectangle tool (M) to draw a bright rose - red background block and add the headline text: 'BRANDED SPACES TO BUILD MEANINGFUL RELATIONSHIPS'. I chose a modern sans - serif font and made it as close to the original visual style as possible through centering alignment and font - size adjustment.
Step 3: Project display area.
Below the main visual, I used image frames and label texts to reproduce the project work display area. Each work module includes an image, a project name and a classification label (such as 'Light+Building'). I replaced the original pictures with pictures of a similar style and arranged them in a two - column layout, strictly aligning with the guide lines.
Step 4: Footer design.
The footer part includes contact information, navigation bar links (such as CULTURE, PORTFOLIO, JOURNAL) and language - switching buttons. I used the text tool and dividing lines to draw them manually, keeping the font, character spacing and color style consistent.
Fig 2.1 Final (PDF)
3. Working with Grids and Layers
I used Illustrator's guide tool throughout to control the typesetting rhythm and ensure the consistency of the white space and alignment between modules. In addition, I grouped all elements and named the layers, such as "navigation bar", "project area", "footer", etc., making the file structure clear and easy to modify.
4. Reflection
This replication exercise has helped me focus more on the detailed control of web page layout. The high - saturation brand color (rose red) and minimalist structure in the DASS website made me realize that a web page does not need to be complicated and can establish a strong brand identity through color and space organization. I also became more familiar with how to complete precise layout through grids in Illustrator.
5. Source File and Submission Link
Conclusion
Through this web page replication exercise, I not only improved my ability to restore web page layout using Adobe Illustrator, but also had a deeper understanding of the structure, color matching and typesetting logic in web design. The styles of DASS and Wemake websites are obviously different. One emphasizes visual impact, and the other pursues simplicity and rhythm, which makes me realize how different brands convey their own characteristics through design. The whole process also made me aware of the importance of guidelines and grid systems in design. It is a very rewarding practice.
Comments
Post a Comment