INTERACTIVE DESIGN / EXERCISE 1

 ╎Gwendalyn Firly Bong / 0374580

╎Bachelor of Design (Honours) in Creative Media

╎Exercise 1

TABLE OF CONTENTS

I. Instructions

II. Lectures

III. Exercises

I. INSTRUCTIONS 


II. LECTURES


III. EXERCISES

Exercise 1

Website 1: Kanak Naturals (link)

Figure 1.1: Homepage

Purpose, goals, and content:
  • Kanak Naturals is a brand that aims to craft responsibly sourced packaging and products that prioritize quality, functionality, and sustainability. This website aims to communicate the brand's vision and mission while giving viewers a clear understanding of the products they offer
  • The content is presented shortly and concisely, with bold headings clearly indicating the focus of each section
Visual Design

Figure 1.2: Website Design
  • The website features a clean, simple design that enables for easy navigation
  • Color: 
    • A solid color scheme of greens, browns, and oranges, reflecting the brand’s focus on green initiatives and commitment to eco-friendly practices. "The light background combined with dark-colored text creates a strong contrast, allowing for better readability
  • Typography: 
    • Clean, bold, sans-serif text that is well-structured to allow for visual hierarchy
    • Additional custom font for the letter “K” representing Kanak 
    • A few words starting with the letter C are replaced with K
      • These unique fonts create some form of brand identity
  • Imagery/Interactive elements: 
    • The website makes use of 3D models to showcase its products, incorporating them both in the loading screen and main menu to communicate the brand and what they offer. As users scroll, the 3D models transition smoothly between sections, creating a seamless visual experience
Functionality

Figure 1.3: Top Navigation Bar

Figure 1.4: Quick Links and All Information

Figure 1.5: Loading Screen
  • Navigation and Organization: 
    • The website has clear headlines and well-labeled tabs, with information neatly organized into distinct sections for easy comprehension. 
    • Each section presents content in a short and concise manner
    • A navigation bar at the top of the page allows users to quickly jump between sections
    • Quick links are present at the bottom of the page to allow for users to quickly go back to sections they want to revisit
  • Performance:
    • The initial loading screen runs smoothly without any noticeable issues
    • However, as users interact with the more advanced UI elements, the website starts slowing down
    • The custom cursor occasionally lags behind 
    • The 3D models glitch when the website is zoomed in or out
Website 2:  Dropbox (link)

Figure 2.1: Main Menu

    Purpose, goals, and content:
    • Dropbox is a cloud storage service that allows for users to store and share files online. This specific website explains and shows an overview of Dropbox as a whole, highlighting its core features and the key components that make up the platform
    • This website successfully showcases each part of what makes Dropbox what it is by sectioning it off into several parts: Typography, color, imagery, logo, framework, voice & tone, iconography, and motion. The content is supported with a unique UI on each page
    • The content is structured in a more relaxed tone. Sentences are kept short, and it relies heavily on UI elements, images, and videos to convey the information visually, letting the design speak just as much as the text.
    Visual Design

    Figure 2.2: Different Sections of the Website
    Figure 2.3: UI Changes when Interacted with
    • The website features a modern, bright design that aligns with the innovative and tech-forward identity of the brand
    • Color: 
      • The use of bright colors helps differentiate each section while creating a more cohesive overall color scheme
      • The plain black or white background paired with the bright accent colors creates good contrast and creates fun in the design 
    • Typography: 
      • A clean, simple, sans-serif font that helps to ensure readability and a clean aesthetic
    • Imagery/Interactive elements: 
      • Each page stands out with its own unique design, consistent visual elements that tie the entire site together
      • The use of different interactive elements makes each page fun and unique to explore
        • Examples include different mouse cursors, color-changing elements, interactive videos, etc
    Functionality

    Figure 2.4: Different Sections
    • Navigation and Organization: 
      • The website is well-structured, with clearly labeled sections or blocks that make content easy to locate
      • A simple UI allows for seamless navigation with no unnecessary lag
    • Performance:
      • The website performs smoothly with no noticeable lag or frame drops
      • Each section is integrated smoothly with smooth animations when going back and forth between sections
      • Each section is smoothly integrated, with animations enhancing transitions between each section
      • Images and videos run smoothly and automatically without requiring manual input

    Website 3: Kaizen (link)

    Figure 3.1: Main Menu

    Purpose, goals, and content:
    • Kaizen is an immersive digital experience created by the studio makemepulse. It follows a narrated journey with a character named Kaizen through a visually rich world while exploring various areas
    • The content is presented like a storybook, with a warm, guiding voice; almost like a mother leading her child through the world. The child experiences the journey with a sense of wonder and innocence, viewing the world through a playful, childlike lens
    Visual Design

    Figure 3.2: 4 Main Acts of the Story
    • Color: 
      • Bright, vibrant colors are used throughout the site, with each act of the story represented by different color palettes. This helps visually differentiate the narrative acts
    • Typography: 
      • A handwritten, childlike font is used, reflecting the perspective of the young protagonist as they explore the world 
    • Imagery/Interactive elements: 
      • Voice acting and music are both integrated into the website, enhancing immersion and drawing viewers deeper into the experience and story
      • The stunning visuals and videos also further captivate users
      • The combination of 3D effects and animals, along with soft, watercolor-like colors creates a unique and immersive visual experience for the viewers
    Functionality

    Figure 3.3: Navigation Menu at the End
    • Navigation and Organization: 
      • Navigation is easy, with subtle visual cues guiding users throughout the experience.
        • Examples include a custom mouse cursor displaying “go next”, and a small flashing button at the top of the screen to signal progression
      • By the end of the experience, users have the option to revisit each “act,” which are clearly labeled and easy to navigate.
    • Performance:
      • Despite the use of high-quality visuals and stylized graphics, the site performs well. Videos play smoothly, maintaining a consistent flow and enhancing the immersive experience without buffering
    Website 4: Hi-Keys 1997 (link)

    Figure 4.1: Main Menu

    Purpose, goals, and content:
    • Hi-Keys 1997 is a promotional website for the synth keyboard of the same name. The keyboard features a sleek, lightweight, yet durable design. The website showcases its key features, materials, and overall build quality in a visually engaging way
    • The content is presented straightforwardly, almost resembling an advertisement or an informational booklet, with a clear focus on delivering key details of their specifications and features efficiently
    Visual Design

    Figure 4.2: Website Design and Style

    Figure 4.3: Font
    • The website embraces a minimalist design infused with subtle retro-futuristic elements, creating a clean yet unique aesthetic that reflects the product's identity
    • Color: 
      • A color palette of metallic silvers and blacks highlights the technological essence of the keyboard. These colors enhance the modern, industrial feel while supporting the site's minimalist layout
    • Typography: 
      • The fonts lean into a subtle retro-futuristic style, combining clean, geometric sans-serifs with subtle vintage sci-fi influences. This choice complements the overall theme and adds character without sacrificing readability
    • Imagery/Interactive elements: 
      • The website combines line art, detailed rendered images, and 3D modeling to showcase the product in full 360 degrees, allowing viewers to explore its details from every angle
    Functionality

    Figure 4.4: Detailed Information at the End
    • Navigation and Organization: 
      • The website has a single-page layout with smooth transitions between sections, creating a fluid browsing experience
      • The website lacks clear navigation tools, such as quick links or a navigation menu, which makes it difficult for users to locate specific sections
      • However, the website is well organized, with the main features highlighted at the beginning and more detailed specifications presented toward the end
    • Performance:
      • The performance is a significant issue. The site is extremely laggy, so much so that it caused my browser to crash
      • Videos and images take time to load, with frame drops present
      • Optimization is needed to improve loading times, responsiveness, and overall usability

     Website 5: Yellow Fellow (link)

    Figure 5.1: Main Menu

      Purpose, goals, and content:
      • Yellow Fellow, founded by Guy Trefler, is a motion studio. They specialize in creating graphics packages for films & series, building design systems for brands, creating explainers, and music Videos (as stated on the website). 
      • Their website showcases their work, along with the awards they have won over the years. 
      • The website’s content relies more on visuals than text, using short words and phrases alongside fun graphics to convey information in a short but visually engaging way
      • Long paragraphs only appear on the "About" page, while the rest of the website maintains a concise and visually focused approach
      Visual Design

      Figure 5.2: Different Fonts used
      • The website's overall concept embraces a fun and quirky aesthetic, creating a more playful user experience
      • Color: 
        • Yellow is the dominant color, complemented by several accent tones like greens and blues to add depth and a pop of color
      • Typography: 
        • The website uses a simple yet diverse range of fonts, incorporating decorative styles to emphasize specific words and add personality
      • Imagery/Interactive elements: 
        • The homepage and logo have a lot of interactive features, each element offering its own quirky animations, creating engagement and reinforcing the brand's playful tone
        • Bright elements are used to highlight specific works, like their award-winning projects
      Functionality

      Figure 5.3: Stationary Navigation Bar

      Figure 5.4: Sections of the Content (Projects)
      • Navigation and Organization: 
        • The website features a simpler and straightforward navigation system. Essentially, it's a single-page layout, with a stationary top navigation bar acting as jump links. It allows for users to quickly find specific sections with minimal effort
      • Performance:
        • The experience is smooth, images load quickly, and interactive elements respond without lag

      Comments

      Post a Comment

      Popular posts from this blog

      ADVANCED TYPOGRAPHY / TASK 1: EXERCISES

      Image
      ╎Week 1 - Week 4 ╎Gwendalyn Firly Bong / 0374580 ╎Bachelor of Design (Honours) in Creative Media ╎Task 1: Exercises: Typographic Systems & Type & Play TABLE OF CONTENTS I.  Instructions II.  Lectures III.  Exercises IV.  Feedback V.  Reflection VI. Further Reading I.  INSTRUCTIONS   II. LECTURES Week 1: AdTypo_1_Typographic Systems Typographic Systems "All design is based on a structural system" 8 major variations:  Axial System: All variations are organized to the left or right of a single axis Radial System: All elements are extended from a point of focus Dilational System: All elements expand from a center point in circular fashion Random System: Elements appear t...
      Read more

      DESIGN PRINCIPLES / TASK 1: EXPLORATION

      Image
      ╎Week 1 - Week 3 ╎Gwendalyn Firly Bong / 0374580 ╎Bachelor of Design (Honours) in Creative Media ╎Task 1: Exploration TABLE OF CONTENTS I. Instructions II. Lectures III. Exploration IV. Feedback V. Reflection VI. Quick Links I.  INSTRUCTIONS   II.  LECTURES Visual communication Utilizing design to convey purposeful messages to a target audience Designs must be well thought-out and executed Elements of Design Point/Dot The simplest element of design When used as a repetitive mark, it forms a line As it moves in space, 2D and 3D forms are created Line ...
      Read more

      DESIGN PRINCIPLES / TASK 2: VISUAL ANALYSIS & IDEATION

      Image
      ╎Week 3 - Week 5 ╎Gwendalyn Firly Bong / 0374580 ╎Bachelor of Design (Honours) in Creative Media ╎Task 2: Visual Analysis & Ideation TABLE OF CONTENTS I.  Instructions II.  Lectures III.  Exploration IV.  Feedback V.  Reflection VI. Quick Links I.  INSTRUCTIONS   II.  LECTURES Visual Analysis A method of understanding design that focuses on the visual elements and principles To recognize the choices that a designer made in creating the design To understand how the formal properties of a design communicate ideas, content, or mea...
      Read more