INTERACTIVE DESIGN - EXERCISES
27/8/2023 - ? (Week 1 - Week )
Tong Min Xuan / 0362744
Interactive Design / Bachelor of Design In Creative Media / The Design School
Exercises
INSTRUCTIONS
The website of Pixelismo is a portfolio of a graphic designer and illustrator based in Italy. The website aims to showcase the artist's work and skills, as well as to attract potential clients and collaborators. The website is effectively communicated to the user, as it has a clear and consistent visual design, a simple and intuitive navigation, and a high-quality and relevant content.
|
| Fig1.0 Screenshot from website 1 |
Visual Design & Layout
The website has a minimalist and modern design, with black and white colors and red accents. The colors contrast and highlight the artist’s colorful work. The typography is simple and elegant, with sans-serif headings and serif body text. The imagery shows the artist’s portfolio in different categories, with large and clear images that have a hover effect. The layout is responsive and adaptive, with a grid system, a fixed header and footer, and a logo, menu, and social media links.
|
|
Fig 1.1 Screenshot of Website 1 |
Functionality and Usability
The website is functional and user-friendly, with a fast and compatible performance, and a simple and intuitive menu. The menu has four items: Home, Portfolio, About, and Contact, and it shows the current page. The Home page introduces the artist and leads to the Portfolio page, which has a filter option for the projects. The About page has the artist's bio and skills. The Contact page has a form, an email, and a phone number. The website also has a back-to-top button and a favicon.
|
| Fig 1.2 Screenshot of Website 1 |
|
| Fig 1.3 Screenshot of Website 1 |
|
|
Fig 1.4 Screenshot of Website 1 |
The website has a high-quality and relevant content, with clear and concise language that showcases the artist’s work and skills. The content is accurate and updated, reflecting the artist’s latest projects and achievements. The content is also clear and organized, with a logical structure and a hierarchy of information. The content is engaging and persuasive, highlighting the artist’s style and personality, and inviting the user to contact him. The content is also consistent.
|
| Fig 1.5 Screenshot of Website 1 |
Website 2 - https://www.luni.app/
Summary
The website of Luni is a well-designed, well-developed, and well-maintained website that effectively showcases the impact and value of Luni's work and network. The website is informative, attractive, engaging, and user-friendly, and meets the needs and expectations of its users. The website does not have any major flaws or areas for improvement, and can be considered as an example of a high-quality website.
Visual Design & Layout
The website's visual design and layout are appealing and expert, with a dependable colour palette of blue, green, and white that represents Luni's brand identity and objective. Using a variety of fonts, widths, and weights to establish contrast and hierarchy, the typography is readable and varied. The visual, which includes pictures and videos of the business owners, financiers, and collaborators Luni collaborates with, is both timely and excellent. To improve the website's aesthetic appeal and informational value, icons, graphs, and animations are also used.
|
| Fig 1.6 Screenshot of Website 2 |
Functionality and Usability
The website offers a smooth and intuitive user experience. The navigation is simple and easy to use, and the fixed menu bar allows users to access the main parts of the site at any time. Forms are well-designed and user-friendly with clear instructions, validation and feedback. Interactive elements such as sliders, buttons and pop-ups are responsive and functional, increasing the site's interactivity and engagement.
|
| Fig 1.7 Screenshot of Website 2 |
Content
The quality and relevance of the site's content was high, providing accurate, clear and well-organized information about Rooney's projects, portfolio and partners. The content was also well structured and formatted, using headings, sub-headings, bullet points and paragraphs to break up the text and make it easier to read and scan. The website also provides links to external resources such as blogs, podcasts and social media to provide additional detail and credibility.
|
| Fig 1.8 Screenshot of Website 2 |
EXERCISE 2 - Web Replication
|
|
Fig1.9 Screenshot of the original website |
Replication process -
|
| Fig 2.0 Screenshot of the process |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Fig 2.6 Final Web Replication (JPEG) |
|
|
Fig 2.8 Screenshot of the original website |
Replication Process -
|
| Fig 2.9 Screenshot of the process |
Final Submission-
|
| Fig 3.0 Final Web Replication (JPEG) |
EXERCISE 3 - Creating a Recipe Card
|
| Fig 3.2 Screenshot of Process |
|
|
Fig 3.3 Screenshot of Process |
|
|
Fig 3.4 Screenshot of Process |
|
|
Fig 3.5 Screenshot of Process |
|
|
Fig 3.6 Screenshot of Process |
|
|
Fig 3.7 Screenshot of Process |
|
|
Fig 3.8 Screenshot of Process |
|
|
Fig 3.9 Screenshot of Process |
REFLECTION
Comments
Post a Comment