INTERACTIVE DESIGN - PROJECT 2

27/05/25 - 22/06/25 ( Week 5 - Week 9 )
Carren Yeliandi / 0376990
Interactive Design / Bachelors of Design in Creative Media / Taylor's University
Project II

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Reflection

Lectures

Lecture 5 - HTML & CSS

HTML :

ID attribute => Giving an element a unique identity allowing you to style it differently from any other instance of the same element on the page.
Class attribute => To identify several elements as being different from the other elements on the page.
Block elements => Elements that always appear to start on a new line in the browser window.
Inline elements => Elements that always appear to continueon the same line as their neighbouring elements.

CSS -> Allows you to create rules that specify how the content of an element should appear. It contains two parts: a selector and a declaration (contains property and value), for example :

"p (selector) {

font-family(property) : arial(value); (declaration)

CSS in HTML Docs :

-> External CSS = By using the <link> element.

-> Internal CSS = By using the <style> element

Lecture 6 - CSS Selectors

CSS (Cascading Style Sheets) selectors are a fundamental part of CSS that allow you to target and style HTML elements on a web page.

Types of selector :

Universal Selector : *
Element Selector : For example => p {
ID Selector : #my-element
Class Selector : .my-class
Descendant Selector : For example => .container a {
Child Selector : For example => ul > li {
Pseudo-Class Selector : For example => a:hover {
Pseudo-Element Selector : For example => p::before {

Lecture 7 - Box Model

Display Property :

Block element = starts on a new line
Inline (<span>) = wrap a text inside a paragraph
Other type = Inline-block, flex and grid

Box Model (From inmost to outmost) :

Content
Padding
Border
Margin

CSS Flex-box = A powerful tools for creating responsive and efficient web layouts. Important properties :

Display: flex: Establishes a flex container.
Flex-direction: Defines the direction of the flex items (row, column).
Justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).
Align-items: Aligns flex items along the cross axis (stretch, center, start, end).

BACK TO TABLE OF CONTENTS

Instructions

PROJECT 2 - WEB REDESIGN PROTOTYPE

Original Website : https://www.baeckerei-meier.ch/index.html

Process :

Fig 1. First Prototype (Week 9 ; 22/06/25)

The colors are ugly, the layout is weird so I tried out different color palette before deciding to combine them. I also arrange the layout again using 8 columns as base to help create a clean and balance layout.

Fig 2. Second Prototype (Week 9 ; 22/06/25)

The colors is better, the lecturer rejected the use of gradients and mentioned it's scattered and outdated looks. This time I changed the image and text layout again and changed the menu and logos that is said to be outdated.

Fig 3. Third Prototype (Week 9 ; 22/06/25)

The menu still looks weird, the lecturer mentioned the unbalanced text and image layout specifically the gap in between. So I deleted the blocks and expand it to the bottom with the existing placeholder image and text. I also gave the text and image more gaps and added a login/registration form under the contact section. I also deleted the shadow underneath the contact card on the homepage and added a 1pt line stroke instead.

Fig 4. Fourth Prototype (Week 9 ; 22/06/25)

I only just realized I'm making an e-commerce website, so I changed the cart into a service navigation menu instead and changed the add to cart into more info. I had added a contact us button in exchange, in case any potential customer is interested in buying. I also added a single card as a placeholder for all the "More Info" button (It will open when clicked).

Fig 5. Final Prototype (Week 9 ; 22/06/25)

FIGMA - PROTOTYPE LINK

Rationale :

The key features of the prototype :

This prototype has minimal menu to minimize user's confusion and maximize user's navigation experience. The homepage shows the current most popular choice of bread or cakes of the shop as well as a call to action button with the text of "BUY NOW" to attract customers. The home page also have summarized information regarding the bakery with a smaller call to action button that will lead them to the corresponding menu that contains more informations. At the end of the website, there is always a footer that will lead them to the designated links. The picture used is aesthetically pleasing to the eyes to maintain user's interest.

In the menu section, the choices is divided into 3 option that can be open and closed. The prototype is currently opening the cake section that holds placeholder images and descriptions. If clicked, it will lead the user into a "Card" that is filled with important information regarding the chosen goods along with a click to action button to the contact menu for any interested customer.

Design decisions made during development :

During the process of developing the prototype, I realized that my image placement in my proposal is horrible. It just doesn't fit the vision of website that I'm going for and made it looked weird instead. So I fixed the image placement using the columns that I had used as base and fixed the text accordingly.

Other than that, the "MENU" navigation bar is supposed to have a description of what the product is underneath the baked goods, however after some observation, those descriptions is deleted and is to be put in the baked goods' "card", that will show when the products are clicked, instead if it is to be developed further. This is to minimize user's distractions during product scrolling. But if user's want to see the brief ingredients list, I had added an information logo which when hovering will show them the ingredients list. As the original wireframe for the menu is said to be outdated, I changed it into a much more simpler form to give the website a clean look by erasing the option bar on the side and expanding it to the bottom.

There was also a change in color palette, as the original color palette looked horrible during implementation. Multiple color palette was tried out and in the end, the colors selected was chosen one by one from each color palette to make a new color palette.

I had also decided to remove the "Cart" and change it into "Services" as making an e-commerce website seems a little too complicated for now, so I changed it into "Services" which will include events offered in the store.

I also added a login and registration form in the contact section for any potential repeating customer and give the contact information it's corresponding logo with the similar style to create a consistent look.

How the prototype addresses the objectives set in the redesign proposal :

1. Improved Navigation (Minimal Menu) : Compared to the original website, this prototype only have 5 menu that contains all the important information regarding the shop itself. The original website had 13 menu that will show more menu when you hover on top. It was mostly confusing to navigate the website due to the large amount of menu.

2. Improved Interactivity (Call to Action Button) : A call to action button can help users to immediately understand the purpose of the website itself. The original website had none obvious call to action button, showing the website as an informational website about the shop itself. However, in the website there is a so called online shop that when clicked only showed a white pop-up screen. The redesigned website had multiple call to action button with various size depending on the importance of the content is. For example, the "BUY NOW" call to action button is the biggest as it serves as the main purpose of the website which is to attract any potential customer. However, that doesn't mean information regarding the website is erased, it is just summarized and inserted into the corresponding menu which is the "ABOUT US" and the "CONTACT" menu.

3. Modernized and Minimalistic Layout : The information inside the website was check and summarized to only contain the important informations to maximize user's experience. The layout is not jam-packed with colors and text or images and the colors used is selected based on the suitability with the content of the website and the aesthetic final look. The text hierarchy is also clear with size, font and typeface differences. The image layout is arranged based on the columns template that I arranged (8 columns, 120 pixels width , 15 pixels gutter).

4. Improved Device Compatibility : This prototype is designed for desktop, however, there will be a second set of frames just for phone users. It will mainly use the same text and information, just slightly different layout. For now, this objective is yet to be seen on the current prototype. This issue will be attempted to be resolved later on during the coding process.

(853 words)

BACK TO TABLE OF CONTENTS

Reflection

It was fun as it was also frustrating.

BACK TO TABLE OF CONTENTS

Carren Yeliandi (0376990)

Search This Blog