INTERACTIVE DESIGN - Final Project
Bachelor of Design (Honours) in Creative Media
Liang Lina 0347076
INTERACTIVE DESIGN - Final Project
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1e1l2c3y8MvzswPM44cPMBS_6JAONRlPU/preview"
width="640" height="480" allow="autoplay"></iframe>
Final Project :
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.
Web prototype:
TORONTO CUPCAKE
Web page
In Project2, I have submitted the layout of three web pages after
transformation.
Fig. 1.1 project 2
Then, when preparing for the final project, I looked for reference on the
Internet and designed the layout, layout and content of the remaining two
pages.
Fig. 1.2 page
I have four pages: home, about us, order, contact. The fifth page is the six
cupcakes of the home page, but all lead to the detail page of a cupcake. The
cupcake page and to box can go to the order page. materials can lead to the
corresponding wikipedia. The navigation bars on each of the five pages are
interactive, folding and turning into buttons when the page is scaled down.
about us, order, blog and contacts us in the information block at the bottom
can be accessed to the corresponding screen.
From the only screenshots I had, I could tell that this was not working, it
failed, it was not a fully usable web page, and I searched the Internet for
a lot of ways to solve the problem.What I needed to do was reactive, and
that's what Mr. Shamsul taught. So I quickly fixed my huge problem.
On the other hand, my order page has also been changed for overall comfort
and page integrity. Originally, each box corresponded to one content, but
when I zoomed out, it got out of order, so I rearranged the page.
HTML and CSS JS
Fig. 2.3 Index Navigation bar js
Submission：
Main page：home page
Page 2: about us
Page 3：Order
Page 4: Contact
Page 5: cupcakes
Fig. 1.3 5page
I want to make a dynamic effect on the home page, which is what I wanted
to do when I first designed it. I want the top page of the home page to
move left and right.
Then I searched the Internet for how to do this. Then I found it, but it
required very high definition images. This is the image I used initially.
Fig. 1.4 pic
Then I ran into my biggest problem with this page, and I didn't notice
it until three pages later.
My web content does not scale with my web page. When I zoom out, my
content is hidden.
Fig. 1.5 home page
Fig. 1.6 contact page
Fig. 1.7 order page
Fig. 1.8 Silkier dynamic effect
Fig. 1.9 new home page
Fig. 1.10 new order page
Fig. 1.11 new contact page
As you can see from the image above, I also made one where when you zoom
out, the navigation bar will automatically close up and become a button
like, clicking on it will bring up the navigation bar.
In order to make my pages more harmonious and more comfortable to use when
you zoom out, I redesigned and modified my cupcake page and made some
adjustments to make it more comfortable to use on the smallest
page. From left to right.
Fig. 1.12 new cupcake page
Fig. 1.13 new order page
Here are some screenshots of my work at dw.
Fig. 2.1 index.html
Fig. 2.2 index.css
Fig. 2.4 Index Picture carousel js
Fig. 2.5 contact.html
Fig. 2.6 contact.css
Fig. 2.7 order.html
Fig. 2.8 order.css
Fig. 2.9 about us.html
Fig. 2.10 about us.css
Fig. 2.11 cupcake.html
Fig. 2.12 cupcake.css
Netlify
I uploaded my entire file to netlify
Fig. 3.1 netlify
I make the web on the computer, on the phone and ipad effect
Fig. 3.2 computer
Fig. 3.3 ipad
Fig. 3.4 iphone
Report
In the initial stages of project development, it is crucial to define
the project objectives. We need to be sure that my customers are cake
buyers, men and women, young and old, so I try to keep my page as
simple as possible with no bells and whistles.
The design stage is one of the core links of the project. This must
ensure that the content is properly organized and categorized so that
users can easily find the information they need. I use clear
navigation menus, sensible page layouts, and category labels. At the
same time, the interface design pays attention to the collocation of
colors, the use of graphic elements and the beauty of typography. In
this process, I was faced with the challenge of exhaustion of design
inspiration and difficulty in unifying design styles. In order to
overcome the problem of design inspiration, I extensively collect
excellent design cases on pinterest, analyze and learn from them. Then
I used uniform color styles and uniform fonts, rounded text boxes,
etc.
In the technical implementation stage, it involves front-end
development languages such as HTML, CSS, JavaScript, etc., as well as
database selection and management. In the process, I encountered the
biggest technical difficulties, browser compatibility issues and
so-called responsiveness issues, among others. I did a lot of browser
compatibility testing, and I asked different friends to help me test.
In terms of code optimization, it follows the best practice principle,
simplifies and reconstructs the code, and rationally uses the cache
technology and optimization algorithm to improve the system
performance.
I can see that I may face different challenges at each stage, but with
a sound approach and a lot of search effort, these challenges can be
overcome and ultimately drive the project to success. In future
projects, we should pay more attention to the early planning and
preparation, as well as the communication and feedback in the process,
to ensure that the interaction design project can meet the needs of
users and achieve the expected goals.
REFLECTION
In addition, Mr.Shumsul told us on January 3, 2025 that he would leave the school at the end of this semester. I would like to express my sincere thanks to Mr.Shumsul for what he has taught me in design. I hope Mr.Shumsul has a nice day!
Experience：
Overall, this is a very colorful course. I think this course is special, it is more interesting, it is not constrained, all the design is completely up to us. Mr.Shamsul gave me a lot of help and taught me how to use code and software in class.
Observations：
This course is also more difficult than you think, you have to think about the content, you have to design pictures, you have to typesetting, your pictures and typesetting are all centered around your theme, if your design content is too empty, not special, it will be difficult to use, causing inconvenience to people, so we need to observe how to better comfortable use, how to achieve better.
Findings：
In the process of interaction design, we need to do a lot of typesetting, typesetting is to better use the web page, better highlight the key points in the web page, cake page to recommend what cake, how to jump smoothly, dynamic effect is not abrupt, and so on, how to provide users with a better experience.
Comments
Post a Comment