Excercise 1 - Interactive Design

Week 1

 Aurellia Franseska Djauhari - 0365053

Interactive Design

Bachelor of Information Technology (Minoring in Creative Media Design)

Website No. 1

Fig 1.1 cydstumpel

Purpose and Goals

This website will show Cyd Stumpel's skills in the finest creative as well as technical ways. The site serves as an online portfolio to be able to view her works and get to know more about her capabilities. The goals of this site include showcasing some of her various projects, creating a strong identity online, and giving others easy access to contact her through email and social media links. 

Visual Design and Layout

The website mainly use simple colors, the background color is a soft beige, which provides a neutral canvas that highlights the site's content without causing strain on the eyes. On the main page, lavender color is used for most of the text. Each page has its own primary text color. For the typography, it's bold and well-structured fonts. Users are guided through headings, body content, and project labels by a distinct layout. The Website features a clean, single-page layout with scroll-triggered animations and transitions. There's also a hover effect, which adds visual interest to the website. 

Functionality and Usability

A simple texts menu is used for navigation. There are several social media contact forms, and an email link is provided for communication. Interactive. Additionally, hover effects are employed on interactive elements, such as project thumbnails and links, adding a layer of visual interactivity that invites users to explore further.

Fig 1.2 Social Media Information

Content Quality

The menu is clearly worded. Information is appropriate, meaning too technical for the general audience at the same time. The website presents an assortment of creative portfolios, including such projects as De Visdeurbel. The content is organized in a manner that truly reveals the creator's work and influences. 

Performance

The website loads quickly on modern internet connections. The site is fully responsive, adapting seamlessly to desktop, tablet, and mobile screen sizes. Content remains readable, and functionality is preserved across devices.

Fig 1.3 CYD STUMLE from Mobile Phone Screen

Website No. 2

Fig 1.4 saisei

Purpose and Goals

The purpose of the Saisei website is to introduce the firm as a professional and a trusted company in architecture, design, and sustainable development. It aims to showcase their expertise by highlighting key projects, awards, and their commitment to innovation and sustainability. It also promotes their products and services, making it easy for visitors to learn more and make purchases.

Visual Design and Layout

The modern, minimalistic style combined with a neutral color palette of dark brown and beige accents gives the site a clean, calm, and professional feel. Typography is clear, enhancing readability against simple backgrounds, while the use of high-quality imagery supports the brand's premium vibe. 

Functionality and Usability

The navigation is direct and intuitive, the easier it is for a user to locate what they want, the less confused they will be. Scrolling interactions feel smooth, the working of forms is satisfactory like in the case of the newsletter signup by giving clear feedback on submission. 

Content Quality

Content tells the firm's philosophy, values, and expertise very well. Credibility is additionally strengthened through the highlighting of key projects and awards. Statements concerning sustainability and innovation are clear. Regarding the product descriptions, they are clear and sufficiently descriptive to represent the value of the item being offered to the customer.

Fig 1.5 website story

Performance

The technical aspects of the site work perfectly. It loads almost instantaneously over mobile networks, while assets like images and scripts are well optimized for speed yet do not compromise on visual quality. Responsive design ensures that the site behaves well across a multitude of devices, from desktops to tablets and smartphones, without compromising functionality or aesthetic integrity. The transitions also run smooth, with a fine polish that adds sophistication to the user experience without causing much delay.

Fig 1.6 SAISEI from Mobile Phone Screen

Website No. 3

Fig 1.7 cristinagomezruiz

Purpose and Goals

The purpose of Cristina Gómez’s website is to introduce her as a professional photographer and showcase her creative work. The goal is to display her photography projects clearly, share her artistic background, and make it easy for visitors to explore her portfolio. It also aims to allow potential clients or collaborators to contact her easily. The site focuses on creating a strong, professional image and helping Cristina build her audience and opportunities through a clean, visual presentation.

Visual Design and Layout

Using a minimalist black and light grey color scheme, the website shows a vibrant photographs. Modern typography completes the refined and professional look, being clean and easy to read. The simple layout is well-balanced, with plenty of white space that keeps the visitors' focus on the visuals but not so much that it becomes overwhelming. 

Fig 1.8 photograph from the website

Functionality and Usability

Navigation is simple with a straightforward menu. Rather than clicking through multiple pages, users interact with a smooth, continuous scroll-down system. Page transitions are smooth, helping maintain engagement without interruption. Additionally, a subtle change in text color on hover provides a gentle visual cue, making interactive elements easily identifiable.

Content Quality

Contents of the website are concise, readable, and carefully organized, placing attention on Cristina's artistic identity first. The upper part establishes an atmosphere where the visitor can appreciate her creative vision and background. Further down gives way to curated photography, an in-depth look at projects, and an organized portfolio. The texts are supportive of the visuals and do not overburden but instead balance them.

Performance

Image compression and efficient coding practices contribute to fast performance, ensuring that visitors aren't delayed while browsing. Some images adjust their display size depending on the device, such as showing differently on desktop and mobile views. Whether viewed on a large monitor or a small smartphone screen, the text maintains its clarity and readability.

Fig 1.9 cristinagomezruiz from Mobile Phone Screen

Website No. 4

Fig 1.10 playground.it

Purpose and Goals

The purpose of the Playground website is to show that they are a creative and innovative digital agency. Their main goals are to display their past projects, build trust with new clients, attract companies that need digital solutions, and invite talented people to join their team. The site highlights their skills, partnerships, and culture, helping visitors quickly understand what Playground offers and why they stand out.

Visual Design and Layout

The Playground website immediately captures attention with a bold, vibrant blue background that radiates energy and modernity. If you scroll down further the background will change to mostly black. The Big text create a strong first impression. The phrase "PLAY AHEAD OF THE GAME" is broken up for visual tension and interest. Navigation is tucked discreetly to the right, offering quick links without overwhelming the visitor.

Functionality and Usability

On the right side, the menu is minimalistic yet noticeable, facilitating easy navigation to important sections, including Culture, Solutions, Generative AI, Works, Careers, and Contacts. Engagement through interactive features, like hover effects or scroll animations (such as those implied by the modern aesthetics), more than likely retain the interest of the user while not compromising speed. The clear typography makes the text readable on all types of devices, enabling them to maintain the spirit of accessibility.

Fig 1.11 Scroll animation

Content Quality

Their language is easy to understand and clear-cut while conveying their expertise and services. There is a Selected Works section, where users can look into in-depth case studies representing several of their projects. It highlights their capabilities and builds trust with solid examples. The website also mentions the names of partners, which builds upon the Playground’s credibility and presence in the industry. Therefore, the contents presented are well organized, relevant, and interesting.

Performance

The Playground website demonstrates strong performance across multiple aspects. Pages load quickly, even with the use of many visuals and interactive elements. The website is highly responsive, adapting smoothly to different screen sizes, from desktops to tablets and mobile devices, without losing design quality or functionality. Animations and transitions are fluid, with no noticeable lag.

Fig 1.12 Playground. from Mobile Phone Screen

Website No. 5

Fig 1.13 studiofables

Purpose and Goals

The website performance is great. Loading time is very quick, and all images as well as content are displayed quite smoothly without any visible delay. This site runs in full reactivity on all devices making it adaptive and presenting the quality experience users get whether it is through a desktop, tablet, or mobile.

Visual Design and Layout

The website layout by Studio Fables has two colors black and pale beige, it is minimalist yet classically appealing. Then, there is an option of a dark mode feature that transforms the background into black while the text appears in beige. This dual color scheme enhances the website's sophisticated, modern feel, while providing a versatile viewing experience.

Functionality and Usability

The website of Studio Fables is functional and usable to the maximum extent, with very intuitive navigation and layout. The design is a clean, simple environment allowing access to sections like the Selected projects, archives, and an about page, with considerable ease. while making the experience more immersive but yet not overwhelming with elements such hover effects and gentle animations. 

Content Quality

The content on Studio Fables' website is clear, concise, and relevant, effectively reflecting their design expertise. The homepage has a simple layout with just the website name, and the navigation leads to key sections such as "Selected Projects," "Archives," and "About." These sections provide a well-organized, engaging overview of the studio’s services and past work. The language is professional and accessible, ensuring that visitors quickly understand the studio's approach and capabilities.

Performance

The website performance is great. Loading time is very quick, and all images as well as content are displayed quite smoothly without any visible delay. This site runs in full reactivity on all devices making it adaptive and presenting the quality experience users get whether it is through a desktop, tablet, or mobile.

Fig 1.14 Studio fables from Mobile Phone Screen