18/9/2023 - 2/10/2023 / week 4 - week 6
DAVIES
ANNIKA ANGELA /0362108
BACHELORS OF DESIGN(HONOURS) IN CREATIVE
MEDIA
INTERACTIVE DESIGN
PRPJECT 1:PROTOTYPE DESIGN
LECTURES
WEEK 4 - HTML
WEEK 5 - HTML & CSS
WEEK 6 - Cancelled class
INSTRUCTIONS
TASK 1: PROTOTYPE DESIGN
-
In the initial phase of the assignment, the main objective is to craft a
UI design prototype for my digital resume or curriculum vitae (CV)
utilizing prototyping software like Adobe XD or Figma. This prototype
will highlight the arrangement, visual components, and interactions
within the user interface of your digital resume
STEP 1: Sketches
Fig Sketches 22/8/2023 Week 4
I began this assignment by coming up with sketched out layouts that I
would find appropriate to display the information. I liked the first, scond and
fourth layout the most as they were very simple and it would be easy to browse
through the Cv and the most important details would be at the top and catches
the eye of the reader. I then began the design process in figma by creating a
design file with a width of 1330px.
STEP 2: Translating sketch onto Figma
Fig adding columns for prototype design 29/9/2023
Fig making prototype from sketch 1
I initially had the prototype looking quite long and I did not like the
spacing of the layout as well as how long the About was and I then decided to
use a more professional picture as well as keeping "EDUCATION" and
"EXPERIENCE" in the same column area. I also used a sans serif typeface called
Mandali for areas with a lot of text such as my ABOUT and EDUCATION. I used a
Serif typeface called Lindell Hill. I also wanted to use cool colours to add a
pop of colour. I decided to choose a pastel blue colour as it evokes
professionalism and it does not overpower the content of my CV.
Fig organising information
For the dates I used Italic Lindell hill. I used Mandali font for where I
studied and what I studied. I used a navy blue colour for where I studied to
distinguish the information.
Fig aligning text
I made sure to have the longest contact detail in the middle and the shorter
ones to the sides as they took a similar amount of text. I also sized down
the numbers by 0.5pts.. I included icons to make it easier navigate and find
whichever relevent contact detail the reader would be looking for.
Fig aligning graphical elements
I made sure to have the lines aligned as well as the icons for EDUCATION
and EXPERIENCE. I also made the headings for education and experience were
the same point size of 65pts. I used Flaticon and added it to my
plugins. I also included my word mark that I designed in typography as I thought it would an interesting addition. I liked my final outcome as it was simple and the graphical elements were minimal and everything remained readable and not too crowded for an easy scheming process which is essentially how CVs are read.
FINAL PROTOTYPE
PDF
FIGMA FILE
REFLECTION
Designing this prototype gave me a sense of introspection and learning the layout and trying to use my sense of design that I learnt in Typography and DPI came into play as I tried to figure out appropriate fonts to use and how I can create a good composition as well as creating consistency, this brought me back to our first task of web anaylsis but I had to analyze and evaluate my won work and make suitable changes, As the project progresses, there's a growing sense of achievement. Watching the digital CV take shape on the screen is immensely satisfying. It's not just about the content anymore; it's about crafting a visually appealing and unique representation of myself. The ability to customize every detail, from typography to visual elements, empowers me to tailor the CV to my personal brand.
.jpg)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment