Interactive Design - Project 2: Website Redesign Prototype
Shema Goldie Angwen / 0372129
Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 2: Website Redesign Prototype
CONTENT LIST
INSTRUCTIONS
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
Prototype Development:
Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Submission:
A fully functional prototype ACCESSIBLE via a SHAREABLE link or as a DOWNLOADABLE file.
A brief writeup in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
LECTURE NOTES
WEEK 7: BOX MODEL LAYOUT IN CSS
The Display Property
- Display is CSS's most important property for controlling layout.
- Every element has a default display value depending on what type of element it is.
- The default for most elements is usually block or inline.
Block-level element
<div> is the standard block-level element. A block-level
element starts on a new line and stretches out to the left and right
as far as it can.
Figure 1.1: Block Level Element
Inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph
<span> like this </span> without disrupting the flow of that paragraph.
Figure 1.2: Inline Element
A common example is making inline li elements for horizontal menus.
Other Display Properties:
• Inline-block
• Flex
• Grid
Box Model in CSS
• Most HTML elements are containers. Consider some of theHTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
• Each of these is a container, or box.
• Each box has three layers that surround its content. The layers are, in order from inside to outside:
• Padding (extra space inside the border)
• Border
• Margin
Figure 1.3: Box Model
The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).
<div>
<p>This is a paragraph. It is a very short paragraph.</p>
</div>
We can apply the following CSS to the paragraph tag in order to control the
size of the padding, border, and margin of the paragraph:
div {
background-color: red;
padding: 0;
border: 1px solid black;
margin: 0;
}
p {
background-color: white;
padding: 1em;
border-width: 10px;
border-style: solid;
border-color: blue;
margin: 10px !important;
}
CSS Flexbox is a powerful tools for 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.
Flexbox (Flexible Box Layout)
Key Concepts
Flex Container: The parent element with display: flex.
Flex Items: The children of the flex container.
Flex Container:
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).
EXERCISE
WEEK 6
EXERCISE
Figure 2.1.1: HTML code
Figure 2.1.2: HTML code
Figure 2.1.3: HTML code
Figure 2.1.4: The Result
WEEK 8
SELECTOR EXERCISE
Figure 2.2.1: HTML code
Figure 2.2.2: HTML code
Figure 2.2.3: HTML code
Figure 2.2.4: CSS code
Figure 2.2.5: CSS code
Figure 2.2.6: CSS code
Figure 2.2.7: CSS code
.png)
Figure 2.2.8: The Result
WEEK 9
DROP DOWN MENU
Figure 2.3.1: HTML code
Figure 2.3.2: HTML code
Figure 2.3.4: CSS code
Figure 2.3.5: The Result
PROJECT 2
Website Redesign Prototype
- PROCESS -
To begin, I created a 1280px wide frame and redesigned three pages as instructed: the homepage, a core content page (academic page), and the contact page. I watched several YouTube tutorials to learn how to implement a carousel and incorporated it into the design. Additionally, I applied hover effect animations to enhance interactivity.
Figure 3.1.1: Carousel Work Process
Figure 3.1.2: Carousel Work Process
Figure 3.1.3: Hover Process
Figure 3.1.4: Hover Work Process
Figure 3.1.5: Hover Work Process
- WRITEUP -
How The Prototype Addresses The Objectives Set In The Redesign Proposal
Figure 3.1: Redesign Objectives (Proposal)
To create a visually appealing website that goes more than just being a standard website but bringing the brand’s color and the school's values to the digital platform
The website is being redesigned to be more visually appealing and eye-catching. The prototype overall presents Mahanaim School's value and brand identity, replacing the original site which made very limited use of the brand's colors. This helps viewers to recognize that the website is closely related to the school's identity, creating a stronger brand presence in the new redesign prototype.
To enhance user satisfaction by increasing interactivity between the user and the website
In the redesigned prototype, more call-to-action buttons have been added compared to the original site, along with incorporating carousels, to create interaction between the website and the users.
To improve user usability
The new layout enhances user usability by removing potential confusion. One of the major changes made is in the Academic page of the original site, where all the categories were separated into different sections while having very limited information. In the redesigned version, these categories are merged and arranged in a more appealing and organized way to improve usability for the users.
The Key Features of The Prototype
Consistency is implemented throughout the website by using only three fonts and picking three color for all pages. This creates a coherent look and ensures that all element, such as headers, footers, sidebars, and navigation bars, work harmoniously together. Simplicity is also applied in the design. The user interface is kept simple, with a clear task flow, easily recognizable icons, and clearly labeled navigation. Clear navigation bar allows users to easily find important pages without confusion. The consistent use of just three fonts and three colors contributes to both simplicity and visual clarity. Visibility is improved through the addition of call-to-action buttons in the new prototype, making key actions more noticeable and accessible to users. Feedback is also implemented in the prototype through visual cues, such as button color changes when hovered over. I also added a button state change from "Send" to "Sent" after it is clicked. This feature is implemented to let users know that their form has been successfully submitted. This helps users understand that the element is interactive and improves the overall user experience. The design is also compatible across different devices, whether accessed on a desktop, tablet, or smartphone.
Design Decisions Made During Development
After testing, I decided to add one more font, Rosarivo, to create more variation. So now I use three fonts: Montserrat, Proxima Nova, and Rosarivo.
For the color palette, I decided to eliminate black and use only three colors: yellow, navy blue, and white. Navy blue provides good contrast with yellow, and both colors represent the school's identity. White is used to avoid making the design feel too overwhelming and to add a clean, simple touch in certain parts of the website.
For the home page, I made several changes from the wireframe. I adjusted some of the placements. Based on Mr. Shamsul’s feedback that the navigation menu had too many items, I simplified the navigation menu and placed the "Mahanaim School" name above the navigation bar. I also rearranged the "About Us" section and placed the school motto below the Mahanaim School title. In addition, I added the phrase "Come and Join" along with a Call-to-Action (CTA) button labeled "Register Now." The "Academic" section was also changed into a button-controlled carousel to improve usability.
For the Academic page, I changed the placement of text and images. Mr. Shamsul had given feedback that the text overlapped the images, so I adjusted the layout accordingly.
For the Contact page, I decided to place the map below the form to create a more logical and visually clean layout.
- FIGMA LINK -
FEEDBACK
WEEK 9
Mr. Shamsul gave me feedback on my redesigned prototype.
Here are the notes I took:
Home Page
- The headline is too big.
- Make the header more balanced.
- The navigation is a bit too much.
- There is no call-to-action button. Add something like "Enroll Now," "Open Day," or "Come and Join."
- No need border for the upcoming event poster.
- Make the design consistent: if you use corner radius in one place, use it everywhere, or at least reduce the size of the corner radius.
- The footer is okay, but you can resize the font and add icons. You can find icons on Freepik.
Core Content Page (Academic Page)
- Overall it’s okay but difficult to read.
- For the text overlapping the image, he liked the style but advised using positioning and setting a specific width. Also, check how it looks on other mobile devices.
- Add other information but reduce the amount of body text. You can add like a "Learn More" button, find an engaging label.
- Highlight the page that is currently open.
Contact Page
- Adding a map is okay. Inserting an image of a teaching session held in class is also okay.
Mr. Shamsul also showed me the Amazon and Taylors
websites and suggested using them as references.
REFLECTION
Creating a prototype and operating Figma was a new experience for me. I learned how important it is to ensure that the design is well presented across various devices. I also learned how to create hover effects and implement feedback features to enhance user satisfaction throughout the app. This project was quite challenging for me, especially because the time given was short and I was still learning how to use Figma. Thankfully, Mr. Shamsul understood the situation and decided to extend the deadline by a few days, which gave us more time to complete the project.
Comments
Post a Comment