Interactive Design Exercise 1

-

 Week 2 |  Exercise 1

Write your report in e-portfolio

Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.

What To Have in The Analysis:

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing each Web Analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (headings/subheadings)

Submit your e-portfolio link for submission.



Website Analysis Report

1. Tilda (https://tilda.cc/)



Purpose & Goals
Tilda is a no-code website builder aimed at individuals, designers, and businesses who want to create professional websites quickly. Its goal is to combine ease of use with elegant design freedom.



Design & Layout
The homepage is clean, modern, and typography-driven. It uses whitespace, minimal color schemes, and strong visuals. Scrolling animations and previews highlight features well.



Functionality & Usability
Navigation is straightforward, with a clear top menu for features, pricing, and templates. Interactive previews help users understand the platform. However, the amount of scrolling can feel overwhelming.

Content Quality
The content is professional and persuasive, with strong storytelling. However, beginners may find it too marketing-heavy and slightly overwhelming.

Performance & Responsiveness
Fast loading, smooth animations, and excellent responsiveness across devices.

Strengths

  • Professional design and typography.

  • Clear communication of features.

  • Highly responsive across devices.

Weaknesses

  • Homepage too long.

  • Pricing not immediately visible.

Recommendations
Simplify the homepage and move pricing higher for clarity. Provide a “quick start” video guide.

2. Studio Kino (https://www.studiokino.fr/)



Purpose & Goals
Studio Kino is a French creative agency specializing in branding, design, and communication. The site’s purpose is to showcase their portfolio and attract clients.



Design & Layout
The design is visually striking, using bold typography, smooth animations, and a minimal dark-themed palette. The layout is sleek and artistic, reflecting creativity and professionalism.

Functionality & Usability
Navigation is simple but unconventional — the menu is minimal and content-focused. While it looks elegant, some users may struggle if unfamiliar with creative portfolio sites.



Content Quality
Content is visual-first, with projects showcased in large imagery. Text is concise, but non-French speakers may struggle as translations aren’t always available.



Performance & Responsiveness
The site is fast and responsive, but heavy use of animations may slow down weaker devices.

Strengths

  • Strong artistic identity.

  • Minimal and visually appealing layout.

  • Smooth animations.

Weaknesses

  • Navigation may feel unclear.

  • Limited accessibility for non-French users.

Recommendations
Add English translations and a clearer menu. Consider accessibility improvements like contrast adjustments and alt-texts.

3. Copilot Products (https://hellocopilot.com/products/)



Purpose & Goals
Copilot provides business management tools for service companies (invoicing, contracts, and client portals). Its goal is to sell SaaS solutions to freelancers and small businesses.



Design & Layout
The website uses a clean white background with blue accents, evoking professionalism. The layout is structured with feature sections, call-to-actions, and screenshots.



Functionality & Usability
Navigation is excellent, with a sticky menu and well-organized product categories. Interactive elements like live demos are a plus.

Content Quality
Content is highly informative, with detailed product breakdowns and case uses. It balances technical information with marketing clarity.

Performance & Responsiveness
Loads quickly, works well on all devices. Screenshots and visuals are optimized.

Strengths

  • Clear communication of SaaS features.

  • Well-organized product descriptions.

  • Strong CTAs and modern design.

Weaknesses

  • Could overwhelm new users with too much information.

  • Minimal storytelling compared to competitors.

Recommendations
Add more visual demos or explainer videos. Provide simplified comparison charts to help decision-making.

4. AnimatedPSD (https://animatedpsd.com/index.html)



Purpose & Goals
AnimatedPSD offers animated Photoshop mockups for designers to showcase projects more dynamically. The site’s goal is to attract designers seeking alternatives to After Effects.

Design & Layout
The design is bold and creative, relying on large visuals of animated devices. The homepage emphasizes motion, supported by big fonts and catchy slogans.

Functionality & Usability
Navigation is straightforward with sections like “How it Works” and “Browse Mockups.” The process is explained in simple steps, making it beginner-friendly.

Content Quality
The content is clear and persuasive. It highlights the unique selling point (animated mockups without After Effects). However, it lacks detailed case studies or customer testimonials.

Performance & Responsiveness
The website is responsive and loads reasonably fast, though heavy animations may cause minor delays on slower networks.

Strengths

  • Unique concept with niche targeting.

  • Clear tutorials and step-by-step usage.

  • Strong visuals to demonstrate products.

Weaknesses

  • Limited client examples/testimonials.

  • Heavy on marketing slogans, light on detailed comparisons.

Recommendations
Add customer showcases to build trust. Provide short video tutorials or free trial mockups to attract first-time users.

5. Club Muso – Corporate Party Bands (https://www.clubmuso.co.uk/corporate-party-bands/)



Purpose & Goals
This UK-based site promotes live music bands for corporate events and parties. The main goal is to attract clients looking for entertainment booking services.

Design & Layout
The design is event-focused, using vibrant imagery of live performances. The layout highlights available bands, event types, and booking details.

Functionality & Usability
Navigation is simple, with sections for bands, events, and contact. Booking information is accessible, but some details (e.g., pricing) are not upfront.

Content Quality
Content is clear, engaging, and audience-targeted. However, the text could be more concise, and videos or sample performances would add more value.

Performance & Responsiveness
Responsive across devices. However, some images are large and could slow loading on mobile.

Strengths

  • Engaging visuals of bands.

  • Clear structure and booking path.

  • Strong alignment with audience needs.

Weaknesses

  • Lack of upfront pricing transparency.

  • Few multimedia elements (e.g., performance videos).

Recommendations
Add short performance clips for each band. Provide indicative pricing to help clients filter options quickly.

Comments

Post a Comment

Popular posts from this blog

Simple Personal Profile Page

-
Image
Simple Personal Profile Page: https://eloraby-task1.netlify.app/ Mohammad Oraby Hello! My name is Mohammad Oraby. I’m currently studying Software Engineering and I’m passionate about technology, design, and problem-solving. I enjoy learning new things and creating projects that can make life easier or more interesting. Outside of academics, I love exploring new places, trying different types of food, and meeting people from various cultures. I believe that every experience helps shape who we are and teaches us something valuable about the world. My Hobbies Playing Chess Watching Movies Traveling My Skills Web Development (HTML, CSS, JavaScript) Team Collaboration Creative Problem Solving Personal Profile Page after adding a little CSS:  https://mohamed-eloraby-task1.netlify.app/ Mohammad Eloraby 💻 Software Engineering Student | 🌍 Based in Kuala Lumpur | 🎯 Passionate Learner Hello! My name is  Mohammad Eloraby . I’m currently pursuing my degree in  Software Engineering ...
Read more

Final Project Website Redesign

-
Image
  CAVS 55 Website Redesign Code Folder 1. Introduction This project focuses on transforming an approved website redesign prototype into a fully functional, responsive, and accessible website. The main objective was to implement the visual and interaction design decisions made during the earlier stages of the project and bring them to life using front-end web technologies. The final outcome is a live website that accurately reflects the original Figma prototype while following best practices in web design, usability, and performance. The website was developed as a multi-page platform consisting of five main pages: ACT Home, Events, Collections, Contact, and FAQ. Each page was designed and implemented to provide a consistent user experience, intuitive navigation, and a professional visual appearance. The final website is publicly accessible via a live URL hosted on Netlify. 2. Tools and Technologies Used The development of the website relied on standard front-end web technologie...
Read more

Prototype Development: CAVS 55 Event Page Redesign

-
Image
  figma.com Prototype Development: CAVS 55 Event Page Redesign The objective of this prototype is to translate the CAVS 55 Event Page redesign proposal into a functional, interactive representation that demonstrates improved usability, visual hierarchy, and engagement. The prototype aims to transform the original static and text-heavy page into a dynamic event hub that clearly communicates the significance of the 55th anniversary of the Center for Advanced Visual Studies (CAVS) while supporting intuitive navigation and a more immersive user experience. Overview of the Prototype The interactive prototype was developed using Figma, leveraging components, auto-layout, and interactive frames to simulate realistic navigation. The prototype includes three core pages: Homepage (CAVS 55 Main Event Page) Program Page (Core Content Page) Contact Page These pages reflect the redesign goals by presenting information in clear sections, using strong visual hierarchy, and incorpora...
Read more