PROJECT 2: Website Redesign Prototype
Khansa Raudlatus Syahiidah / 0374511
Interactive Design / Bachelor of Design (Honours) in Creative Media
PROJECT 2: Website Redesign Prototype
TABLE OF CONTENTS :
1. Lectures
2. Instructions
3. Proposal
4. Feedback
5. Reflection
1. LECTURES
CSS - (Cascading style sheet)
- CSS allows you to create rules that specify how the
content of an element should appear
CSS style rules with HTML elements
- CSS works by associating rules with HTML elements. These
rules govern how the content of specified elements should be
displayed.
- A CSS rules contains two parts:
Selector and Declaration
Selector: Indicate which elements the rule applies to.
The same rule can apply to more than one element if you separate the element
names with commas.
Declaration: Indicate how the elements referred to in the
selector should be styled. Declaration are split into two parts (property
& Value), and separated by a colon.
CSS Properties Affect how Elements are Displayed
- CSS declaration sit inside curly brackets and each is made
up of two parts; Property & Value, separated by a colon.
- Property: Indicate the aspects of the elements you
want to change.
- Value: Specify the setting you want to use for the
chosen properties.
Methods to employ CSS
Using an external CSS
<link>
- The link element can be used in a HTML document to tell the browser where to find the CSS file used to style the page
- An empty element and lived inside the <head> element
- It should use 3 attributes:
- href: Th specify the path to the CSS file
- type: Specifies the document being linked to. The value should be text/CSS
- rel: Specifies the relationship between HTML page and the file linked to. The value should be stylesheet when linking to CSS file
<link>
- A HTML page can use more than one CSS style sheet
- To do this it could have a <link> element for every CSS file it uses
- presentation (fonts and colors) and a second to control the layout
<Style>
- You can also include CSS rules within a HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page
- The <style> element should use the type attribute to indicate that the styles are specified in CSS
- The value should be text/CSS
- When building a site with more than one page, you should use an external CSS style sheet. This:
- Allow all pages to use the same style rules (rather than repeating them in each page)
- Keeps the content separate from how the page looks
- Means you can change the styles used across all pages by altering just one file (rather than each individual page)
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.
- Selectors are used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.
- They are a crucial part of web development because they enable you to control the presentation and layout of your web pages.
Universal selector: Selects all elements on the page. It's represented by an asterisk (*). Use it with caution, as it can affect all elements and lead to inefficient CSS.
Element selector: The simplest type of selector, it targets HTML elements by their tag name.
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.
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.
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,"
Child selector: Selects elements that are direct children of another element. To select only the immediate <li> children of an <ul>, you can use: ul > li
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)
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.
2. INSTRUCTIONS
3. WEBSITE PROTOTYPE
1. Home page
In redesigning the home page of my chosen website, I
started of by putting the main navigations such as, home, about us, products,
services, and contact us. In redesigning this website, I picked out a design
reference where I would apply to my prototype. Following the feedback given
from Mr. Shamsul, I was to pick an idea / reference prototype design from
Pinterest and use it as a guide in redesigning my work. As for the interaction
used in the home page, I placed "hover" where color would change when hovering
a specific button or words, as well as a simple click interaction where it
would navigate to the next page.
2. Core content page
I designed three pages for the core content, which are, about us, services, and products page. In all three pages, I also design the layouts by picking a confectionary website prototype design in Pinterest. In all three pages, I also used the hover and button, I placed all navigations in all pages of the website for easier access, especially when moving from one specific page to another. This was designed to make users / customers less confused and easier when wanting to go back to the main menu. I also tried making the products page a lot more organized by placing the product pictures and order button, aiming for customers to have easier access when visiting and purchasing from the website.
3. Contact us page
The contact us page did not really have much, I tried to make it precise by only adding social media pages and additional store information, like their open and close hours. For the address, as I have input the information in another page, I decided to link it through the image placed in the contact us page. For this page, the interaction most used was by linking all the social media images to its actual page. For example, the image of Instagram, once you click it will lead you to their actual Instagram page, and so for the other social media image. As I placed the real life store image of the website store, I made it clickable to navigate users to its direct address in google.
While working on redesigning all pages of the website, I tried to simplify description and information so it wouldn't look too full and boring to see. The color choices that I used in my work was based on one of the colors of the original website. Since it was also a cake and sweet shop, I tried going with soft and pinky colors. All cake photos that are placed in my final website were all taken from the original website. In all pages, I decided to go with a couple different fonts, however, I try not to make then look too visible which might result too inconsistency and a cluttered look. Most font sizes were the same, but some may differ especially for title and the actual description. Different from my initial plan, I decided on leaving the background color plain white than coloring it pink. I thought this way, the website will look a lot cleaner and less crowded, especially with colors.
4. FEEDBACK
After Showing Mr. Shamsul my first website prototype
draft, He told me that my website did not appear to be interesting to look at,
and also to fix all the complex elements I added to my website as it will be
hard to code. Therefore, he suggested that I pick a website design idea trough
Pinterest and recreate it with my own website information.
5.REFLECTION
Experience :
During my work process on this project 2, redesign
prototype, I was able to learn from my mistake and start again. In working
on think task, I started of with a very uninteresting and perhaps messy
website look. However, after receiving feedback from Mr. Shamsul, I was
pointed out the mistakes of my current work. Therefore, I started redesign
using Figma again, and finally ended up with my current final. Although it
may not look the best, it was great to be improving from my previous
work.
Observations :
Throughout using the Figma website in designing our
website, I realize how important it is to set up a reference on what kind
of look you are aiming for. I learned to understand how to create
interactions link clicks, hover, link, and more other.
Findings :
Before starting of any project, either creating a
website, poster, animation, I find it very crucial that we search for
reference and ideas. Not only will it help us understand a certain layout
better, but it also help us create making our work more accurate. For this
task, I tried following a couple ideas from the website prototype I have
picked and use it as a guide in redesigning my chosen website.
Comments
Post a Comment