INTERACTIVE DESIGN - PROJECT 2
Madeline Ordelia Tjahjadi (0376920)
Bachelor of Design in Creative Media
Project 2 : Website Prototype
Table of Content
1. Lectures
2. Instruction
3. Process Work
4. Feedback
5. Reflection
1. Lectures
EXTRA MARKUP
ID attribute --> it must be unique, to identify the elements from others.
Class attribute -> group elements, others elements can have the same class.
CSS
Change the appearance of HTML, designing the website, give a style to
websites.
CSS rule contains:
SELECTOR = target specific elements
DECLARATION = change the rule in css, should be in the curly bracket.
SELECTOR = target specific elements
DECLARATION = change the rule in css, should be in the curly bracket.
Fig 1.1: Example of CSS rule, Week 6.
Fig 1.2: Example of declaration, Week 6.
There are several ways to add CSS:
1. External CSS --> create a separate document from
html
<link>
- the <link> elements can be used in HTML document to tell the browser where to find the CSS file used to style the page.
- empty element and it lives inside the <head> element.
- should use three atributes :
- href --> to specify the path to the CSS file
- type --> specifies the type of document being linked to. The value should be text/css
- rel --> specifies the relationship between the HTML page. The value should be stylesheet when linking to a CSS file
2. Internal CSS (Embedded style) --> apply it in the html or in the same file
<style>
- it lives inside the <head> element
- the value should be text/css
- when building a site with more than one page, better use external CSS
CSS Selector
fundamental part of CSS that allow you to target and style HTML elements on a web page.
Types of selector :
1. Universal Selector
Selects all elements on the page. It's represented by an asterisk
(*).
Example:
* {
/* CSS styles go here */
}
2. Elements Selector
The simplest type of selector, it targets HTML elements by their
tag name.
Example:
p {
/* CSS styles go here */
}
3. ID Selector
Targets an element with a specific id attribute. IDs must be
unique within an HTML document. To select an element with a
specific ID, use a # symbol followed by the ID name.
Example:
#my-element {
/* CSS styles go here */
}
4. Class Selector
Targets elements with a specific class attribute. Multiple
elements can share the same class. To select elements with a
specific class, use a . symbol followed by the class name.
Example:
.my-class {
/* CSS styles go here */
}
5. Descendant Selector
Selects an element that is a descendant of another element. You
can specify a hierarchy of elements to target. For example, to
style all <a> elements inside a <div> with class
"container,"
Example:
.container a {
/* CSS styles go here */
}
6. Child Selector
Selects elements that are direct children of another element. To
select only the immediate <li> children of an
<ul>,
Example:
ul > li {
/* CSS styles go here */
}
7. Pseudo-class Selector
Selects elements based on their state or position in relation to
other elements. Common pseudo-classes
include :hover, :active, :visited, :link, :focus, and :nth-child(n)
Example:
a:hover {
/* CSS styles go here */
}
8. Pseudo-element Selector
Selects parts of an element rather than the element itself. Common
pseudo-elements include ::before and ::after, which are
used to add content before or after an element.
Example:
p::before {
/* CSS styles go here */
}
Box Model-Layout in CSS
Display Property
- Block-level element --> means a new paragraph, starts on a new line
Fig 1.3: Example of block-level element, Week 8.
- Inline element --> can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.
Fig 1.4: Example of inline element, Week 8.
- Inline-block --> makes an element behave like an inline, but allows you to set its width and height, which is not possible with regular inline elements.
- Flex --> for arranging elements in a container
- Grid --> arranges elements into rows and columns
Box model
Most HTML elements are containers. Consider some of the HTML
elements we've used so far: body, p, h1, h2, div, ul, ol, li.
Each box has three layers that surround its content. The box
model can be specified using the usual CSS units of measure (em, %, and px). The layers
are, in order from inside to outside:
Fig 1.5: Three layers box elements, Week 8.
Flexbox
creating responsive and efficient web layouts. It rely on a solid understanding of the Box
Model, as they
manipulate elements' positioning and spacing within a
container.
1. Flex Container: The parent element with display:
flex.
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).
2. Instruction
Document 2.1: Module Information Booklet for Interactive design.
3. Process Work
3.1 Exercise
After completing the coding in Project 1 as an exercise, we styled the
website using CSS. We changed the background color and the font. For the
font, we used Google Fonts.
Fig 3.1.1: CSS coding, Week 6 (26/05/2025).
Final Outcome
Fig 3.1.2: Final Website outcome, Week 6 (26/05/2025).
In week 8, we learn CSS Selector and how it applied to HTML. We did an
exercise to understand better types of selector.
Fig 3.1.3: HTML coding, Week 8 (09/06/2025).
Fig 3.1.4: External CSS coding, Week 8 (09/06/2025).
In class, Mr. Shamsul told us to try make the navigation bar. I made a
new class for header and call it in CSS code to style the navigation
bar.
Final Outcome
Fig 3.1.5: Final Outcome, Week 8 (09/06/2025).
In week 9 we learn how to do a drop down menu in navigation bar.
Final outcome
3.2 Website Design Prototype
The objective of this assignment is to translate our website redesign proposal
into a functional prototype. The prototype should visually and interactively
represent the proposed changes, demonstrating our ability to apply design
principles and UX strategies effectively.
First, I reviewed my website proposal and made some changes to the wireframes.
I then created a design plan outlining what to change and how to apply those
changes in the prototype.
Fig 3.2.1: Wireframes, Week 5.
I started by making some changes to the website logo to give it a cleaner
and more modern look. I used Illustrator to create the logo.
Fig 3.2.2: Creating the logo, Week 8 (13/06/2025).
I maintained the calligraphy style for the font but changed the 'German
cuisine' text so it wouldn't overpower the main logo. To retain the colors
of the German flag, I applied them to the font—specifically on the
'H'—because it has a distinct element compared to the rest.
After creating the logo, I began working on the prototype using Figma. I
plan to design the homepage, About Us, Contact page, and Menu.
Fig 3.2.3: Homepage progress #1, Week 8 (13/06/2025).
I created two components for the homepage: a hover effect for the
navigation and a button for the menu. The navigation will be used across
all pages. I also designed the footer to be applied consistently
throughout the entire website.
Fig 3.2.4: Homepage progress #2, Week 8 (13/06/2025).
I used the colors of the German flag to create a page break before the
footer. After that, I added the necessary information and navigation links for
Home, Menu, and About pages.
here is the final homepage Prototype:
Fig 3.2.5: Final Homepage Prototype, Week 8 (13/06/2025).
(all picture source from pexel.com and food recipe website).
After creating the homepage, I developed two core content pages: About
Us and Menu. I applied the same navigation and footer to the
pages.
Fig 3.2.6: Final About us and Menu Prototype, Week 8 (13/06/2025).
(all picture source from pexel.com and food recipe website).
The last page I created was the Contact page, where I designed a new
component for the form.
Fig 3.2.7: Contact page Progress, Week 8 (13/06/2025).
Here is the final Contact page prototype:
Fig 3.2.8: Final Contact page Prototype, Week 8 (13/06/2025).
After creating all the pages, I began setting up the navigation
so users can move easily throughout the site.
Fig 3.2.9: Navigation process, Week 8 (13/06/2025).
After receiving feedback, I need to make some adjustments to ensure everything aligns properly. I also need to add more sections to the homepage and increase the pixel of the layout.
Fig 3.2.10: Added section in homepage, Week 9 (16/06/2025).
Mr. Shamsul said need to add a map in the contact page. I tried using third party to embed maps into the figma, but it can't work, so I screenshot the map first and later in coding I will embed it.
Fig 3.2.11: Added maps in contact page, Week 9 (16/06/2025).
Final Outcome
Brief Explanation of the Prototype:
The key features of the prototype include a
modern and clean look, with the simple and easy-to-navigate
layouts, more professional photography for the imagery, and a new
font for the typography to improve overall readability. I used different fonts to differentiate between heading and
subheading, effectively showing a clear visual hierarchy
throughout the design. This typographic contrast helps guide the
user's attention, making it easier to scan and understand the
content structure at a glance. Another important feature is the consistent navigation and footer design applied across all pages, featuring a navigation bar with a hover effect to
differentiate the buttons when hovered or clicked. The footer
includes a page break above it, using the colors of the German
flag to maintain visual identity. Third are the interactive elements, such as the menu button on the homepage, designed to create a
visually engaging experience and capture user interest. Lastly,
the core content pages
include the About Us and Menu pages, which introduce the
restaurant. The About Us page shows how the food is made and
what the staff provides. This page helps build a connection with
the users or customer by displaying professionalism. The Menu
page showcases the food in a clean, well-organized layout,
making it easy for users to browse through the food
options.
During the development process, several design decisions were made
to enhance both the functionality and visual appeal of the
website. Logo plays a critical role in building brand identity to
make a strong first impression. So, first change involved updating
the logo to achieve a more modern and simple appearance. This
change is made to ensure the logo align with the modern and clean
aesthetic of the redesigned website. The second change
focused on the placement of the navigation position, from the logo
in the center to the right side–to create a more balanced
composition, especially since there are five navigation buttons.
Lastly, the layout of the menu page was changed to a single row
format. This decision was made not only for aesthetic purposes but
also to support easier future development. As my first design
proposal needs to be made using JavaScript, I need to create
a layout that could be executed using only basic HTML and CSS. By
simplifying the design, I made the prototype easier to code in the
future, while ensuring it remains visually appealing and
user-friendly.
Overall, my prototype addresses the objectives outlined in my
redesign proposal. It offers a solution to the issues found in the
original website. To reach the target audiences identified in my
proposal, I focused on creating a modern and clean visual style.
With the help of references I provide in the proposal, I enhances
both usability and aesthetics by transforming the previously
scattered layout into a simple and consistent design. Brand
identity is important for establishing a consistent and
recognizable design. The changes made for typography, imagery, and
interactive elements help creating a brand identity. With all the
changes made, it allows website to grow and updates can be made
for future development.
4. Feedback
General feedback: Create a prototype that considers interactive elements to make it feel as
realistic as the actual website. Pay attention to the overall layout to
establish a clear visual hierarchy.
Specific feedback: I need to make some adjustments to ensure everything aligns properly. I also need to add more sections to the homepage and increase the pixel of the layout.
5. Reflection
My experience designing this prototype gave me new knowledge about website
creation. It provided me with a fresh perspective on web design, allowing me
to better understand how to improve both the layout and functionality of a
website. To create the prototype, I used Figma, which was a new tool for me.
The app is specifically designed for designers, making it user-friendly and
intuitive, so I had no trouble creating the prototype. While working on the
design, I also considered how it would later be translated into HTML and CSS
code, which added a layer of complexity and made that part of the process a
bit more challenging. Overall, my experience in creating this prototype have no problem, and I
hope it leads to a well-executed website in the future.
6. Further Reading
Adam Akinyemi (November 10, 2023)
Fig 6.1: Doing it right table, Week 6.
Comments
Post a Comment