Skip to main content

Featured

Anatomy and Character Sculpture - Final Project: Complete Character Sculpt

Samantha Kristalyn / 0373905 / Bachelor of Design (Hons) in Creative Media  Anatomy and Character Sculpture  Final Project: Complete Character Sculpt JUMPLINKS 1. INSTRUCTIONS 2.  TASK 3.  FINAL PRESENTATION 4.  FEEDBACKS 5.  REFLECTION INSTRUCTIONS TASK Final Project: Complete Character Sculpt Introduction The Final Project is the culmination of all exercises from this course. Students must produce a fully completed digital character sculpt, complete with outfit, props, textures, and polypaint coloring, and presented in a posed form. The final output must demonstrate strong skills in anatomy, design, detailing, coloring, and presentation. In addition, students must compile their works (Projects 1, 2, and Final Project) into an individual e-portfolio (Blog...
Post a Comment
Read more
Labels

Interactive Design: Exercise 2 - Web Replication

28/04/2025 - 05/05/2025 (Week 2 - Week 3)
Interactive Design / Bachelors of Design (Honors) in Creative Media / Taylor's University
Samantha Kristalyn / 0373905
Exercise 2: Web Replication

JUMPLINKS

1. LECTURES
3. TASK

LECTURES

Week 3
Understanding Web Structure
A well designed website isn't just about good looks; it's about structure, usability, and delivering a smooth experience. This lecture breaks down the fundamentals of website structure and why it plays a critical role in building effective and user-friendly sites.

Why website structure matters
Website structure forms the backbone of user experience. A clear and logical layout improves accessibility, enhances SEO, and ensures users can find what they need without frustration. 

The three key elements of website layout
  1. Header: located at the top, the header typically includes the site logo, navigation menu, and contact details. It serves as a quick-access point for essential info.
  2. Body: this is the core of the site where content like text, images, and videos live. Proper content organization here is crucial for readability.
  3. Footer: found at the bottom, the footer wraps things up with copyright notices, contact info, and extra navigation links.

Key principles of website organization
  • Organizing content: use heading tags (H1, H2, H3…) to create a clear hierarchy. Group similar content together and label sections clearly to enhance user navigation.
  • Navigation menus: help users move through the site efficiently with well-labeled, intuitive menus. Dropdown menus can be useful for more complex sites.

    INSTRUCTIONS


    TASK

    On our 2nd week, we were assigned to replicate two existing main pages of the websites that we have analyzed in Exercise 1 to gain a better understanding of their structure. We were told to follow the dimensions of the existing website, including the width and height. 
    Main focus points: layout, spacing, type style/typography, and color.

    Requirements:
    • Use free stock-images, free from copyright,
    • Look for fonts and typefaces on Google Fonts,
    • Use both Adobe Illustrator and Photoshop to replicate these websites.

    I decided to use these two websites that I had analyzed on Exercise 1:

    I chose to replicate these websites on Adobe Illustrator. Below is the process of each of the websites' replications:

    1. Oreck Vacuum Repair 

    I started off by matching the graphics and searching for similar images to use. We were told to use free stock-images so I looked for the images on Pexels just as instructed.
    I decided to match the image of the little boy vacuuming and used a similar one I found on Pexels.

    Fig. 3.1.1, Side-by-side comparison of the original website's photo (left) and the replicated version (right)

    I also re-drew some of the graphics using the Pen tool on Illustrator. Below are the comparison between the original ones and the replicas side-by-side.

    Fig. 3.1.2, Side-by-side comparison of the original website's graphic illustration (left) and the replicated version (right) drawn using the Pen tool on Adobe Illustrator 

    After doing so, I started looking for similar typefaces and fonts that are on the website through Google Fonts as instructed. Below are the few fonts that I have downloaded side-by-side with the ones I needed to copy. 

    Fig. 3.1.3, Side-by-side comparison of the original website's typefaces and the Google fonts that will be used for the replicated version


    These screenshots below show a step-by-step development process in Adobe Illustrator, where I was creating visual and layout assets for the web replication. I worked on early layout drafts with placeholders and black-and-white outlines. I was also working on the text blocks and basic graphic arrangements. Progress on typography ("WHY BOB?"), more structured text columns, and integration of line illustrations (like the vacuum cleaner design) can also be seen. I was also refining hierarchy and section placements.

    Fig. 3.1.4, Web Replication Progress

    Near the end, I started adding color and final design details. The vacuum cleaner illustration is fully colored and integrated with text ("Invest in quality vacuum service"), showing near-final design. I did some final refinement, adding images (like the person sitting on the couch) and integrating all visual elements consistently, preparing for export. 

    (It is more recommended to view the final work's PDF file since Blogger's settings does not let me load the images in high-quality resolution because of its big size).
     
    Below is the final replicated form of the website in JPEG form.

    Fig. 3.1.5, Final Oreck Vacuum Repair Web Replication (JPEG)


    Google Drive Link

    Below is the final PDF file of the replicated website.
    I have attached the Google Drive link instead temporarily. 
    Due to some problems, I cannot embed the PDF file for now.
    Here is the LINK to the first web replication exercise.
    Colors may differ due to the CMYK color setting on Adobe Illustrator.

    Below is the side-by-side of the original and the replicated form of the website.
    Fig. 3.1.5, Side-by-side comparison of final Oreck Vacuum Repair's Original Web  vs. Replica

    2. Femme Fatale Studio

    I started off by matching the graphics and searching for similar images to use. We were told to use free stock-images so I looked for the images on Pexels just as instructed.

    Fig. 3.2.1, Example of side-by-side comparison of the original website's photo (left) and the replicated version (right)



    After doing so, I started looking for similar typefaces and fonts that are on the website through Google Fonts as instructed. Below are the few fonts that I have downloaded side-by-side with the ones I needed to copy. 

    Fig. 3.2.2, Side-by-side comparison of the original website's typefaces and the Google fonts that will be used for the replicated version


    For the second website, I also followed pretty much the same process. I started by creating rough layouts and basic wireframes to structure the content, including text blocks, sections, and placeholders for images. Then, I refined the typography and composition to establish visual hierarchy and guide user flow.

    After that, I developed the illustrations and graphic elements, adjusted the design details, and gradually added colors to bring the visuals to life. Finally, I integrated all the assets cohesively to prepare them for export.

    In short, the overall workflow from initial wireframes to final polished designs was similar for both websites.


    Below is the final replicated form of the website in JPEG form.


    Fig. 3.2.3, Final Femme Fatale Paris Web Replication (JPEG)

    Google Drive Link

    Below is the final PDF file of the replicated website.
    I have attached the Google Drive link instead temporarily. 
    Due to some problems, I cannot embed the PDF file for now.
    Here is the LINK to the second web replication exercise.
    Colors may differ due to the CMYK color setting on Adobe Illustrator.

    Below is the side-by-side of the original and the replicated form of the website.

    Fig. 3.2.4, Side-by-side comparison of final Femme Fatale Paris'  Original Web vs. Replica

    REFLECTION

    Experience
    During the web replication exercise, I recreated a selected web page layout using Adobe Illustrator and Photoshop. The task involved analyzing the structure of the website, breaking down its design components, and replicating them with precision. Illustrator was primarily used for creating scalable vector elements and layout guides, while Photoshop was used to manage images, apply layer styles, and fine-tune visual elements.  

    Observation
    I noticed that modern web designs often rely on a grid system, consistent use of typography, and clearly defined sections for content and navigation. Illustrator's alignment tools and Photoshop's layer management were essential in mirroring these design principles accurately. I also observed the importance of padding, margin, and visual hierarchy in enhancing user experience.  

    Findings
    This exercise deepened my understanding of both Adobe tools and web structures. It reinforced how web design relies on clean, organized layers and precise measurements. I also gained a greater appreciation for responsive design elements and how visual consistency supports usability. Overall, the replication process improved my technical skills in Adobe apps and provided insight into the meticulous planning behind effective web interfaces.

    Labels:

    Comments

    Post a Comment

    Popular Posts