LEBON STEPHANIE AMELIE JUDITH 0362853 / Interactive Design / Exercises

-

LEBON STEPHANIE AMELIE JUDITH  0362853

Interactive Design / Bachelor of Design ( Honors) in Creative Media/ Taylors University

Exercises

Week 2 |  Exercise 1
Write your report in e-portfolio

Choose TWO (2) 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, including its load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing in not less than 500 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 (heading/subheadings)

Website 1

https://www.brickstudio.nyc

Purpose and Goals: Brick is a booking website for a photography studio that include the additional booking of grips, accessories and lighting equipment.

Communication: Overall the this website communicates its purpose  decently well and in my opinion its targeted towards younger product and portrait photographers as it feels quite edgy but maybe older users may no find this website as professional and a little too 'Gen Z'.

Fig 1.1 Top Section of Webpage.

Visual design and Layout:

The overall color scheme is this bright red and black, its a very high contrast, bold color scheme. The pros are it is very eye catching, easy to read, attractive to certain users and very artistic in my opinion. It also has its cons such as not easy on the eyes, very overwhelming and also not appealing to all.

The typography of the heading 'BRICK' is very cool and original but not that easy to ready as R and K are not that understandable. The other text (body text)  is very different to the heading it is very simple and standard this is good because it balances the very distracting UI and easy to read but it does not match the  heading as they are 2 different types of typefaces ( heading is serif and body sans-serif) and this does not make the typography as cohesive.

Fig 1.2 'BRICK' heading.

The imagery of the studio is very clear I love the addition of dimensions, location and the plan of the studio with a small symbol to show the POV of the images of the studio to give you a better idea of studio layout. but on the downside the imagery of the studio does not really match the rest of the website as its a very mid centaury, bright, old New York industrial looking studio whilst the website is a lot more futuristic.

Fig 1.3 Studio Pictures and Layout.

The imagery of the additional equipment  is very professional the images are high quality but a lot of the equipment looks the same and the labels are not clear due to most of the words are cut out making it rather confusing and prone to ordering the wrong piece of equipment.

Fig 1.4 Equipment Booking Page.

Functionality and Usability:

The navigation of this website is overall very smooth, easy to find and a very understandable(standard) website layout. I can not really find a weakness in the navigation as the website only has a few and simple features.

All the forms are very cohesive they all follow the rectangles with both sharp and rounded edges  including the heading, its well balanced and follow all the same design language.

This website is quite interactive such as the top of the website has this cool zoom in zoom out feature that may interfere with the navigation but is very fluid. The heading is animated as you scroll. The bottom of the website also has this cool falling block feature that has actual physics as they drop randomly every time and act as buttons in case you missed something when navigating.


Fig 1.5 Falling Blocks at the Bottom.

The quality of this website is very nice its accurate, clear due to its simple layout and several ways to all its features so you do not miss anything and very well organized. Absolutely no complains from me.

Performance:

As long as you have a decent internet connection the website is super snappy, fast load times and no buffering so the load times and responsiveness are very enjoyable and I was never frustrated when navigating.

On a desktop/laptop browser the website was very compatible as expected, I tried it on 3 browsers (Chrome, Opera and Edge) and worked well on all 3.

For mobile Devices I tried it on a tablet and phone. On a tablet it was near identical to on a desktop/laptop browser  rather than a enlarged version of a phone and that is brilliant in my opinion. On mobile it was adjusted to the smaller screen by minor changes to layout and additional buttons to replace features that would not work without a mouse.

Fig 1.6 Tablet View.

Fig 1.6 Phone View.

Fig 1.7 Phone View.

Fig 1.8 Phone View.

Website 2

https://gelatolaboca.com

Purpose and Goals: 

The purpose of this website is to order artisanal Argentinian gelato and get it delivered basically anywhere in Dallas.

Communication: 

This website has exceptional communication it makes me want gelato as its very friendly, fun and appetizing.

Visual design and Layout:

The color scheme of this website is based around very bright colors such as yellow and blue which have high contrast improving legibility. This gives off a very fun 'vibe' such as candy wrappers or pop art advertisements very fitting for the purpose. The only issue with this is the attention is taken away from pictures of the gelato.

Fig 2.1 Top Section of Webpage

This is some very impressive typography it manages to be very fun and playful using outlines, bold colors, 3D effects and a cursive secondary font yet still being very legible and simplistic. There is a good hierarchy system with some words being large to show importance whilst other are small details.

The imagery is also fantastic as basically everything is animated or interactive but a lot of it is rather small creative excessive negative space and pictures are some times placed over busier backgrounds making it a little too distracting.

Fig 2.2

Fig 2.3

Functionality and Usability:

The Navigation in this website was very weird at first it is basically entirely scroll based but once you understand this it becomes very natural and fluid although scrolling down makes your screen move in all sorts of directions. My only complaint is important information such as flavors not being on the main page.

In terms of forms there are many shapes as seen in the menu. The forms are very random no cohesion but it works matches the wilder bolder theme. But they are tied together by color and outlines.

There are many interactive elements in this webpage such as most photos move around when you hover over theme at one segment of the webpage your cursor becomes a 'follow me' button and as you scroll the taxi moves.

Fig 2.4 Menu Screen.

The quality of this website is smooth and accurate, but I personally had a issue with the organization as everything was dispersed and some things such as flavors should have been on the main page and not  take a while to navigate to as the primary purpose of this website was gelato. 

Performance:

For most of the time the website was snappy and no buffers but when I tapped on  the logo on the top left my screen bugged out a little bit and I needed to refresh the page


Fig 2.5 Error.

On a desktop/laptop browser the website was decently compatible, I tried it on 3 browsers (Chrome, Opera and Edge) and worked  mostly well on all 3 just a few loading issues.


For mobile Devices I tried it on a tablet and phone. On tablet it was copy paste of desktop meaning it was poorly optimized and nearly unusable but on phone it was well optimized with a changed layout and different navigation.

Fig 2.6 Tablet View.

Fig 2.7 Phone View.

Fig 2.8 Phone View.

Fig 2.8 Phone View.

Week 3 |  Exercise 2

Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page. 


Free image:
https://www.pexels.com/

Google Fonts link:
https://fonts.google.com/

Website 1:  Ocean Health Index

Week 8 |  Exercise 3

To design and build a personal CV page using basic HTML and CSS. This exercise will help you organize information into sections, practice styling text, and create a clean, professional-looking page layout.

Instructions:

  • Add your name as the main header at the top of the page.
  • Write a short paragraph describing yourself, your interests, and any hobbies.
  • List your most recent education details. Include the institution name, year, and course or program.
  • Create a bulleted list of at least five skills you have (these could be related to school, hobbies, or any other talents).
  • Add a simple contact section with an email address and a link to any social media profile (optional). 
  • Use different font sizes and weights to make sections and headers stand out.
  • Choose a basic color scheme for the text and background. Use colors that are easy to read and look professional.
  • Add padding and margins around each section to give your CV a clean, organized layout.
  • Use borders or horizontal lines to separate sections for a professional touch.
  • Add an image or profile picture at the top.
  • Style your CV with a unique font and background color or pattern to reflect your personality.
  • Create a folder for the task and include a subfolder (images) and the HTML file in the folder
  • Create a single HTML file for the content. Name the file as index.html
  • Add the CSS rule within the head section
  • Upload the folder to Netlify (I will show it in class)
  • Embed the link into your blog and submit the post in Google Classroom
Process.


Made the website in Dreamweaver.

Organized everything as instructed in a folder

Uploaded the folder to Netlify.

The result.
Final Link:

Comments

Post a Comment

Popular posts from this blog

Task 1: Exploration Design Principles (202502)

-
Image
LEBON STEPHANIE AMELIE JUDITH 0362853 Task 1: Exploration TABLE OF CONTENTS: Instructions Task 1 Feedback Reflection INSTRUCTIONS TASK 1 Gestalt Theory: This theory is based off shapes/forms as the brain is designed to see patterns in visuals  Fig 1.1 is given below to help visualize the principles below. Principle of Similarity: grouping elements that are similar to each other. Principle of  Continuation: humans tend to view many objects as different. Principle of Closure: completing figures and forms. Principle of Proximity: grouping elements into a unified group. Principle of Figure/Ground: perception of objects either being in the background or foreground. Law of Symmetry and Order: balancing content in your composition. Fig 1.1 https://makeitclear.com/ux-ui-tips-gestalt-principles/ Contrast: There are several ways to create contrast such as 1. Size, 2. Weight, 3. Contrast of Form, 4. Contrast of Structure, 5. Contrast of Texture, 6. Contrast of Co...
Read more

FINAL PROJECT: INFOGRAPHIC VIDEO ANIMATION

-
Image
TIME FRAME:  WEEK 10 - WEEK 13 DEADLINE:  WEEK 14 INSTRUCTION: Based on FLIP group topic research, produce a basic video animation. DESCRIPTION:  Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of: 1. Creating awareness (such as Global Warming, Recycle, etc.) 2. Explaining a process (such as "how to" video) 3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.) Any time based media and software using photography, vector imagery. Design Considerations: ● Organization Principles – LATCH and Content Organization ● Aesthetic Principles – Animation principles ● Cognitive Principles – Principles of visualization Output Expectation: The presentation must be deliberated on, consider each assessment rubric of sorts to your final outcome: ● Show causality ● Multivariate graphics and visuals ● Integrate word number and images ● Content ...
Read more

Task 2: Visual Analysis Design Principles (202502)

-
Image
LEBON STEPHANIE AMELIE JUDITH 0362853 Task 2: Visual Analysis TABLE OF CONTENTS: Task 1:  https://stephaniesdesignblog.blogspot.com/2025/02/design-principles-202502.html Instructions. Task 2. Feedback. Reflection. INSTRUCTIONS TASK 2 Chosen Art Work Fig 1.1 Chosen art work. https://manniartgallery.com/colbert-nourrice.html Details:  Name: Men Machine Artist: Colbert Nourrice Size: 150x200cm Technique: Oil on canvas There are also a few design principles in this design such as balance, unity, harmony and repetition. Visual Analysis: Observation: This artwork a black and grey (monochromatic) artwork which use made using oil on canvas. The primary forms are the 3 circles in the center withe the largest wheel like one being the main point of emphasis, there is also frame like area with a shadow to give depth as if the rectangle is elevated above the rest of the art. There are also a lot of small shaded circles and dots surrounded with random lines that short of look like cells. Be...
Read more