๐
2025.05.13 - 2025.05.28
Qistina Nuralya Maria Binti Azly / 0354180
Interactive Design/ Bachelors of Design (Honours) in Creative Media / Taylor's University
PROJECT 1: PROPOSAL
Table of contents (Quicklinks)
1. MODULE INFORMATION BOOKLET (MIB)
1. MODULE INFORMATION BOOKLET (MIB)
This is the Module Information Booklet for this module:
2. PROCESS
Task: Develop a comprehensive proposal for the redesign of an existing website. The proposal should demonstrate your ability to critically evaluate a website’s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance.
You are required to select an existing website which you feel has several design and UX issue and prepare a detailed proposal for its redesign.
~~~
I chose CertifiedPolygraph.com as my website to improve as was approved by Mr. Shamsul in Week 1.
I required this website from a YouTube video I watched made by Scott Cramer about John Grogan (The Lie Detector Guy), who happened to have a very badly designed website, where Mr. Cramer highlights the website at 8:41 in the video.
2.1 Website Analysis
Starting off, I began with the website analysis where I blocked the contents of a part of the website in Adobe Illustrator.
The website appears outdated, with a cluttered single-column layout and unnecessary images and text. It lacks a cohesive color scheme, using eye-straining vibrant colors on a bright background. Despite showcasing qualifications, it fails to convey professionalism.
Then I went to analysing the user experience of the site:
I found that the navigation bar is fixed at the top of the website and does not scroll with the user, which reduces the overall user experience. It is also poorly organized, appearing as a long block of text rather than clearly defined options. Scrolling to the footer of the main page takes approximately 54 seconds, as a result of an excessive amount of content on the homepage. Additionally, some links lead to error pages, which can confuse users, and many links open in new tabs instead of remaining within the same one, potentially disrupting navigation flow.
As for functionality, the website’s simple content helps for a smoother loading experience; however, the layout remains unchanged across different devices, resulting in poor adaptability to various screen sizes. Embedded YouTube videos are slow to load, which can disrupt the user experience. Navigation links often lead to new tabs or error pages, affecting usability. Additionally, although a Spanish version of the site is advertised, it's unavailable to use, which may mislead or frustrate users.
2.2 Redesign Goals
I plan for the website design to be modernized with a more eye-friendly color palette and theme. Repetitive and unnecessary images or text will be removed or simplified. The homepage will be shortened, with better-connected and more logically structured branch pages.
Target Audience :
- Legal Clients : people in need of actual legal assistance with the lie detector in court.
- General Audience: people interested with the lie detecting process.
2.3 Design Proposal
I figured out the colour pallete first to give myself a start at visualising at how Call-to-Action buttons would looks like against different colored backgrounds. I went with a contrasting dark blue and bright yellow as main colors with off-black, grey and white to support the main colors.
I also thought an official logo for the site would make a nice touch so I created a simple Certified Polygraph logo in Canva to use for the site.
I also looked at a few references, mainly lawyer associations' websites, to try and figure out the proper typography to give a proper professional feel to the site. In the end, I went with DM Serif Display and Roboto Condensed for headings and body text respectively.
As for the wireframes, I created them in Figma and studied the layout of the previous sites I referenced before and made two different main page layouts, of which I favored the second layout more than the first. To also show a bit more believability of the wireframe, I added three extra pages where the main page would branch to: Testimonials, Session Booking and Services.
2.4 UX Enhancements
I plan for the website to be made responsive to different screen sizes, with a simplified navigation bar featuring just a few buttons to make users not feel confused. YouTube videos should be better integrated to boost engagement, and call-to-action buttons need to be clearer with brighter colors. Shortening the site’s length would also help to reduce lag.
3. FINAL
View the slides in Google Slides here.
4. LECTURES & FEEDBACK
Week 4
The lecture was about "The Web and Language" that included learning about the history of the internet and how it works:
- Web Standards
Access in the early days were only via keyboard, mouse and monitor. Now, users can access websites through a wide range of devices like smartphones and tablets. Because of this range, it's important for sites to follow the standards created by the World Wide Web Consortium (W3C) to ensure websites work properly across different browsers, operating systems, screen sizes, and user needs.
- How the Web Works and its Structure
- User types a domain in browser.
- Browser contacts DNS to get the IP address.
- Browser uses IP to contact web server.
- Server sends requested web page back to browser.
- HTML Basics
HTML describes the structure of content within a webpage using tags written as <tag> (opening) and </tag> (closing). Webpages are like structured documents so HTML uses alot of tags associated with Headings (<h1> to <h6>), Paragraphs (<p>), Bold (<b>) and Italic (<i>). Lists (<ul> or <ol>) and images <img> also have respective tags within to present lists and pictures.
-
After the lecture, Mr. Shamsul showed us the vey basics of writing HTML in Notepad/TextEdit and we had a class activity:
The instructions didn't include adding pictures but I wanted to try it out since there were some directions I could follow in the lecture slides. Also, the screenshot is zoomed out a lot to capture everything but I should have definitely taken the full size screenshot like in Exercise 2.
Feedback:
No feedback on Project
Week 5
This week's lecture was about "HTML & CSS" that included learning about:
- ID and Class Attribute
ID attributes are unique and can only be applied to an individual tag. Class attributes are "grouping" tags in a way where you can choose certain number of elements to apply something to. That "something" would be a CSS rule as by default ID and Class attributes don't change the appearance of the element unless said CSS rule is applied.
- Block and Inline Element
Block elements appear to start on a new line like <h1> or <p>. Inline elements like <b> or <i> appear on the same line as neighboring elements
- Introduction to CSS
Cascading Style Sheets (CSS) help users to apply rules to contents of elements to change how they appear on a webpage. There are two parts of a CSS rule, selector and declaration. Selectors indicate the chosen element(s) to be added changes to and declarations indicate what will be changed to the selected element(s). CSS rules can apply to background colors, text formatting, links and etc.
-
After the lecture, we had another class activity where we started to learn to use Adobe Dreamweaver and added CSS into our HTML file from Week 4. We added changed to the background color, body text font/color and headings.
I also tried adding colour to the <hr> but could only add a colored top border to it.
I also added a dancing cat GIF at my introduction to have a bit of fun (>◡<)
Feedback:
- Class activity is cool and good.
- Proposal is good and thorough but make wireframe a bit more legible and presentable.
Week 6
This week's class was held online because of road closures caused by the ASEAN Summit event. The lecture was about "CSS" that included learning more about CSS Selectors:
Selectors are used to define what elements should receive specific styles, such as colors, fonts, spacing, and more.
- Basic Selectors
Universal selectors (* {CSS style}) selects all elements on the page. Element selectors target HTML elements by their tag name (tag {CSS style}). ID selectors target an element with a specific ID attribute attached (#IDname {CSS style}). Class selectors target elements with a specific class attribute (.classname {CSS style}).
- Other Selectors
Descendant selectors select an element that is a descendant of another element like if you wanted to target <a> in <div class="container">, you put .container a {CSS stye} (<a> is descendant of <div>). Child selectors selects elements that are direct children of another element; as <li> is a child of <ul>, to select only <li>, the CSS would be ul>li {CSS style}.
Pseudo-class selectors select elements based on their state or position in relation to other elements (a:hover {CSS style}). Pseudo-element selectors select parts of an element rather than the element itself (tag::before {CSS style})
- Importance of Selectors
CSS Selectors make it easy to target all needed elements on a web page and apply styles. It allows you to write efficient and clean code by targeting only the elements that need to be styled.
-
After the lecture we went straight into creating a new HTML file and also making a separate CSS file attached to the HTML to make the workspace more organised.
I followed Mr. Shamsul's instructions but took creativity into my own hands for the colour and fonts.
Feedback:
No feedback on Project
5. REFLECTION
My first impression of this Project was intriguing because I'd already had a website ready in mind because of a YouTuber I regularly watch so the association between my interests and the project was already encoded in my mind. I was a bit overwhelmed at first since the website I chose had A LOT of things to be improved on so my mind went here and there trying to figure out how to start things. Despite that, I managed to persevere by arranging things in order like doing the website analysis first and the others afterwards.
As for classes, we were introduced to HTML & CSS and it was an admittedly repetitive task at times but parts where I had freedom to put pictures or text were fun and enjoying my time with classmates as well since we goofed around a bit during class.
Overall, I had a nice experience for this Project and hope that the next Project will move as smoothly as this one
(˶แต แต แต˶)
๐
Comments
Post a Comment