INTERACTIVE DESIGN / PROJECT 1 & 2 : Digital Resume/CV Prototype & Working Web Page
19/09/2023 - 24/10/2023 (Week 4 - Week 8)
Agnes Fadhyllah / 0360503
Interactive Design / Bachelor of Design (Hons) in Creative Media
INTERACTIVE DESIGN / PROJECT 1
Instructions
Module Information Booklet
<iframe
src="https://drive.google.com/file/d/1hlUEX_nNsOn4sYQiivWQV-oOAILD6cWQ/preview"
width="640" height="480" allow="autoplay"></iframe>
Project 1 : Prototype Design
Instructions
Create a UI design prototype for your digital resume/CV using software like Adobe XD or Figma. Organize content, design layout, prioritize sections, and incorporate visuals. The evaluation criteria include clarity, layout effectiveness, and appropriateness of typography, color, and imagery.Wireframe Sketch
We were tasked to make a CV, After reading the instructions we were tasked to make sketch of the wireframes and these are the five wireframes sketch that i came up with, i'am very indecisive so made alot of variants.
Figure 1.0 Wireframe sketches
After making the sketches i try to decide which layout i would like to
choose from, and after getting feedback from my peers and a little bit of
critical thinking i finally chose the layout that i wanted to use.
Figure 1.1 Final Wireframe
Digitalization
after finalizing the sketch i start on making the layout on Figma.
Figure 1.2 Progress #1
After making the layout i start tweaking the stuff so it will look better
and adding more information and details into the prototype. i also added my
projects stuff cause i forgot about it on the first progress. i changed the
color because i felt like the color isnt to my liking.
Figure 1.3 Progress #2
Figure 1.4 Outline
There were alot of tweaking and improvision of the original wireframes. it
was a really fun process, i keep on changing alot of things until im finally
satisfied with the result at the end.
reference :
Figure 1.5 Reference.
Fonts Used :
Figure 1.6 Fonts used
Colour Scheme :
Figure 1.7 Color Scheme
Final Outcome
Figure 1.8 Final Design
<iframe
src="https://drive.google.com/file/d/19R07ncJHMyly-Jc6YQYhy5En2_udzbeL/preview"
width="640" height="480" allow="autoplay"></iframe>
-
You can also view it
here.
Project 2 : Working Web Design
Instructions
The objective of this assignment is to transform your static prototype
from Project 1 into a fully functional and interactive web page. You
will apply your knowledge of web layout class to create a working
website that closely aligns with your original prototype.
-
Review your static prototype from Project 1 and analyze its
layout, typography, color scheme, and imagery.
-
Use HTML and CSS to translate the design elements into
code, ensuring a faithful representation of the original
prototype.
-
Aim for pixel-perfect precision while maintaining
responsive design principles to ensure compatibility across
different devices and screen sizes.
-
Upload the file in Netlify and submit the link here. Update
your e-portfolio with all the processes documented in the
blog"
Making a Functional Web
After finishing with the prototype, we were instructed to
start working on making the web, Mr. Shamsul also taught us on
the html and css code in class. the first thing that i did is
i start doing the HTML basic structure.
Figure 2.0 Progress Structure HTML
afterwards i added some classes to the HTML
Figure 2.1 Adding Classes to HTML
and then i imported some class in the style.css and try to
get it as close as the CV design i made on figma as
possible.
Figure 2.2 CSS Progress (Before)
Figure 2.3 CSS Progress (After)
after that i tried making the web responsive, i also added
a link to the project list
Figure 2.4 Progess on Responsiveness
and at last i did some final styling, so that the project
list will be colored black and will be colored orange once
you hover over the link.
Figure 2.5 Final adjustments.
Final Outcome
HTML :
CSS :
Feedback
-
Review your static prototype from Project 1 and analyze its
layout, typography, color scheme, and imagery.
-
Use HTML and CSS to translate the design elements into
code, ensuring a faithful representation of the original
prototype.
-
Aim for pixel-perfect precision while maintaining
responsive design principles to ensure compatibility across
different devices and screen sizes.
- Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog"
Making a Functional Web
After finishing with the prototype, we were instructed to
start working on making the web, Mr. Shamsul also taught us on
the html and css code in class. the first thing that i did is
i start doing the HTML basic structure.
Figure 2.0 Progress Structure HTML
afterwards i added some classes to the HTML
Figure 2.1 Adding Classes to HTML
and then i imported some class in the style.css and try to
get it as close as the CV design i made on figma as
possible.
Figure 2.2 CSS Progress (Before)
after that i tried making the web responsive, i also added
a link to the project list
Figure 2.4 Progess on Responsiveness
and at last i did some final styling, so that the project
list will be colored black and will be colored orange once
you hover over the link.
Figure 2.5 Final adjustments.
Final Outcome
HTML :
CSS :
- None are given.
Reflection
- THIS ASSIGNMENT IS REALLY FUN. the thing is i realy love making stuff like this and also i had a guidance of my brother as i was doing this so it was a really nice quality time too. this assignment had a few stress but that is because im very indecisive when it comes to the design, but overall im very happy with the result
.png)
Comments
Post a Comment