LEBON STEPHANIE AMELIE JUDITH 0362853 / Interactive Design / Final Project

-

 LEBON STEPHANIE AMELIE JUDITH  0362853

Interactive Design / Bachelor of Design ( Honors) in Creative Media/ Taylors University

INSTRUCTIONS

Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website based on
the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.


Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.

Website Development:

Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and any other relevant technologies or framework (e.g., Bootstrap).

Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.

Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.

Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).

Core Features:

Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.

Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.

Technical Considerations:

Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.

Final Testing and Deployment:

Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.

Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.

Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio.

PROCESS
Fig 1.1 Sample of  Main page HTML and CSS.


Fig 1.2 Sample of  Contact page HTML and CSS.


Fig 1.3 Sample of  Product page HTML and CSS.


Fig 1.4 Deploying website in Netlify.



 Fig 1.5 Testing deployed website on 3 browsers.

Run through of the website and developing it.

Using my project 2 prototype I began trying to recreate it in Adobe Dreamweaver using HTML and CSS. I began with trying to create the overall structure of the HTML, trying to create separate sections on the home page such as the header, footer and 2 hero section which is for the welcome on top and a preview of the product page.  After creating the CSS to add the colors, fonts and a Christmas royalty free image to the back of the welcome section. On the header there is a Blinkie.com Logo I redesigned I tried to recreate, there are 5 interactive buttons with selection and hover effects but for this website only Home, Products and Contact redirect you to different pages. In the Welcome section it’s just a Merry Christmas message, a welcome message and a buy now interactive button with hover effects redirecting you to the products page. The mini-Product section is the first row of the Products page labelled “Best Selling Products’’ to create an easy to access area incase you just want to quicky view or buy some popular products. The footer section is just the final area at the bottom of that page you can use to access all 3 of the usable pages to avoid unnecessary navigating. Next Step was checking online on how to link several HTML files so I could make a contact and products page. After figuring that part out I began with the product page creation a 3x3 grid filled with small section for each product that include a picture of the product, product name and an interactive add to cart button with a hover effect. This page has the same header and footer as the main page. The last page I made was a Contact page which also has the same header and footer. The Contact page has some useful information displayed on the top such as opening address and some contact information, below that there is a screen grab of the map location with the location below. The bottom section of this page includes 3 boxes you can type in your name, email and a message with an interactive submit button that has a hover effect.

Deployment And testing.

To deploy my redesigned website, I used another website called Netlify and imported the folder which included the 3 html files (Home page, Product and Contact) and the image file. After uploading the file, the website created a usable and sharable website link. Using that link I was able to copy paste the link into 3 different browsers (Opera, Chrome and Microsoft Edge) and I also sent a few other people to test if the website worked for them. From this I was able to submit and put the link into my blogger.

Challenges and overcoming those challenges.

The main challenge I faced was not being very familiar with HTML and CSS to overcome that I used the exercises we worked on in class and many other websites online such as Boot strap and W3schools to find the template for that code and adjust it to fit my website and design better. Another challenge I faced was trying to replicate the more complex design I made in Figma for Project 2 to overcome this I made compromises such as using a different typeface  but one that was still similar, Using center aligned sections rather than the original all over the place one I originally decided upon and because of this rounding out my buttons made more sense to add more to the more simplified design.  My final challenge was trying to obtain better quality images, but I was unable to and ended up using the same ones off the original website.

Final Reflection

Overall, I would Say that Project 3 was successful as I did meet most of my requirements from Project 1 Proposal such as:

  • Change the layout to balance the typography and other features better.
  • Change the fonts to something more unique and consistent.
  • Find a more unique color scheme that matches the product.
  • Add some more interactivity and animations.
  • Better organization of different menu items.

And even if I was unable to replicate Project 2 as much as I wanted to I still created a satisfactory result which overall reached my objective of improving the Blinkee website.

RESULT
https://peppy-crepe-c0eaaa.netlify.app
Fig 2.1 Home Page.

Fig 2.2 Product Page.


Fig 2.3 Contact Page.





Comments

Post a Comment

Popular posts from this blog

Task 1: Exploration Design Principles (202502)

-
Image
LEBON STEPHANIE AMELIE JUDITH 0362853 Task 1: Exploration TABLE OF CONTENTS: Instructions Task 1 Feedback Reflection INSTRUCTIONS TASK 1 Gestalt Theory: This theory is based off shapes/forms as the brain is designed to see patterns in visuals  Fig 1.1 is given below to help visualize the principles below. Principle of Similarity: grouping elements that are similar to each other. Principle of  Continuation: humans tend to view many objects as different. Principle of Closure: completing figures and forms. Principle of Proximity: grouping elements into a unified group. Principle of Figure/Ground: perception of objects either being in the background or foreground. Law of Symmetry and Order: balancing content in your composition. Fig 1.1 https://makeitclear.com/ux-ui-tips-gestalt-principles/ Contrast: There are several ways to create contrast such as 1. Size, 2. Weight, 3. Contrast of Form, 4. Contrast of Structure, 5. Contrast of Texture, 6. Contrast of Co...
Read more

Task 2: Visual Analysis Design Principles (202502)

-
Image
LEBON STEPHANIE AMELIE JUDITH 0362853 Task 2: Visual Analysis TABLE OF CONTENTS: Task 1:  https://stephaniesdesignblog.blogspot.com/2025/02/design-principles-202502.html Instructions. Task 2. Feedback. Reflection. INSTRUCTIONS TASK 2 Chosen Art Work Fig 1.1 Chosen art work. https://manniartgallery.com/colbert-nourrice.html Details:  Name: Men Machine Artist: Colbert Nourrice Size: 150x200cm Technique: Oil on canvas There are also a few design principles in this design such as balance, unity, harmony and repetition. Visual Analysis: Observation: This artwork a black and grey (monochromatic) artwork which use made using oil on canvas. The primary forms are the 3 circles in the center withe the largest wheel like one being the main point of emphasis, there is also frame like area with a shadow to give depth as if the rectangle is elevated above the rest of the art. There are also a lot of small shaded circles and dots surrounded with random lines that short of look like cells. Be...
Read more

Advanced Typography Task 1

-
Image
25.09.2024--16.10.2024 (WEEK 01-04) LEBON STEPHANIE AMELIE JUDITH  0362853 Advanced Typography / Bachelor of Design ( Honors) in Creative Media/ Taylors University Task 1 Exercises: TABLE OF CONTENTS: Lecture. Instructions. Exercise 1. Exercise 2. Feedback. Reflection. Further reading. LECTURES Week 1: In week 1 lecture I learned about the 8 Typographic Systems: Axial : all elements are organized to the left or right of a single axis.  Fig 1.1 Axial System. Radial : all elements are extended from a point of focus. Fig 1.2 Radial System. Dilatational System : all elements expand from a central point in a circular manner. Fig 1.3 Dilatational System. Random System : elements appear to have no specific pattern or relationship. Fig 1.4 Random System. Grid System : a system of vertical and horizontal divisions. Fig 1.5 Grid System. Transitional System : an informal system of layered banding. Fig 1.6 Transitional System. Modular System : a series of non-objective elements that are c...
Read more