Interactive Design - Final Project: Microsite Design
20/6/2022 - 9/7/2022 (Week 12 - Week 15)
Sasilvia Cheong Pei Hoong / 0345031 / Bachelors of Design in Creative Media
Interactive Design
Final Project: Microsite Design
INSTRUCTIONS
Final Project
Before I proceed with coding the microsites, I went onto
Illustrator to design the layout to get a better plan of what
I am going to do like what we did for project 1 landing page
design. I learned my lesson in project 2 when coding the
working landing page and this time I decided to make the
designs simpler to avoid dying with the codes later
on.
On the Join Classes page, I added checkboxes for visitors who
want to tick which classes they want to join and are able to
pick more than one option for it. Below is a form they are
able to fill out, and before submitting it they have to tick
the box for confirmation just in case they press submit on
accident.
Fig. 1.1 Microsite Design Join Classes (24/6/2022)
For the other pages, I went with a similar layout for all
of them since they are introductions to all of the
different classes provided and different layouts will just
make them look cluttered. Below the introduction and
information about the classes are two buttons which are
the join classes button that will take visitors to the
join classes page and other classes will take them back to
the classes page on the landing page.
Fig. 1.2 Microsite Design Pottery Class (24/6/2022)
Fig. 1.3 Microsite Design Painting Class
(24/6/2022)
Fig. 1.4 Microsite Design Embroidery Class
(24/6/2022)
Image source: https://www.pexels.com/
Coding
For the checkboxes, I used the inline square group
checkboxes code from bootstrap and added the names of
the respective classes, and also deleted the disabled
code in the third checkbox.
Fig. 2.1 Checkbox codes in Bootstrap
(25/6/2022)
As for the forms I used the forms codes and did
some changes according to my preference where I took
out the text muted code and added my contents
in.
Fig. 2.2 Forms codes in Bootstrap
(25/6/2022)
In the class introduction and information, I used
the horizontal card code in Bootstrap and added
the contents.
Fig. 2.3 Card codes in Bootstrap
(25/6/2022)
I had some trouble with centering my cards, even
after trying multiple codes like justify center,
justify-content, just all the codes with the
centers and it did not work. I even tried adding
paddings and no hope with that. But after
searching online I came across this code in stack
overflow which helped me fix my problem.
Fig. 2.4 Centering the cards
(7/7/2022)
Final Landing Page Design
The phone view only works with the microsites and not the landing page.
Fig. 3.1 HTML Codes for landing page
(8/7/2022)
Fig. 3.2 CSS Codes for landing page
(8/7/2022)
Fig. 3.3 HTML Codes for join
classes page (8/7/2022)
Fig. 3.4 CSS Codes
for join classes page (8/7/2022)
Fig. 3.5 HTML
Codes for
pottery class
page
(8/7/2022)
Fig. 3.6
CSS Codes
for pottery
class page
(8/7/2022)
Fig.
3.7
HTML
Codes
for
painting
class
page
(8/7/2022)
Fig.
3.8
CSS
Codes
for painting
class page
(8/7/2022)
Fig.
3.9
HTML
Codes
for
embroidery
class
page
(8/7/2022)
Fig.
3.10
CSS
Codes
for embroidery
class page
(8/7/2022)
Fig. 3.11 Screen recording of final website
(8/7/2022)
FEEDBACK
Week 12 (21/5/2022)-
Specific Feedback:
The design for the microsites are good, for the classes
pages try to take out the border so that it looks better
since the bottom buttons already has a border.
REFLECTIONS
Learning from my lessons from the previous project I decided to not make my layout too difficult for me to handle. Before coding everything out I planned everything out well like what codes I can use in the layout I want, so there would be lesser mistakes made when I do the coding. Everything was able to go smoothly, just only a few struggles were made where I forgot to paste the whole CSS codes for my footer from the landing page to the microsite which made them look weird. I also struggled with making the cards centered but after a few tries and searching on the internet I was able to fix it. I am very grateful to my friend Yi Ki for guiding me in some parts of the projects and helping me come up with solutions to fix some of my problems, without her I will definitely be lost. I am extremely happy that I was able to make the microsites work in the phone view since I was not able to do so for the landing page and everything turned out to be what I expected.
This module was a great experience to learn basic coding, it was amazing to have this knowledge added to me. However, I do not see myself doing any coding-based stuff in the future. Coding is definitely not for me, it is incredibly technical and time-consuming to find mistakes that I do not like at all. The process of it is incredibly painstaking, exhausting, painful, and completely destroys my mind. Let's just say that coding is like math, no matter how hard I try, I can never seem to understand it.
Comments
Post a Comment