Yap Guang You/0363730
Interactive Design/Bachelor of Design(Hons)in Creative Media
Project 1/Prototype Design
Lecture
Week04/The Web and Language
Web standards are defined by their markup languages like HTML and CSS.
Different standards of wed is used to adapt different devices, solution, and
operating systems. The wed standards that can display the website properly
will highly effected for developers and visitors experience. The structure is
to help readers to understand the messages the web is trying to convey and to
navigate around he document. We trying to develop our first web page in class
using the notepad in our device, we are using HTML for this exercise.
Every HTML element can carry the ID attribute, each ID is unique and can
only be carried by one HTML element, it can't have the same ID, just like our
IC number. Class attribute is the same as ID attribute, but it can have the
same Class attribute in different HTML elements. The CSS language allows us to
create rules that specify how the content of an element should appear, such as
our background, font type, font colors, etc. All the decoration code was
contained in {}. We tried to decorate our web in Dreamweaver during the class,
Mr.Shamsul showed us a lot of code to decorate our web, such as adding
background, changing font type and colors, adding lines, etc.
Ex: Scrip font might not have a good effect on the paragraph, it was hard to read.
|
|
Week04/Web page development exercise |
Week05/ID and Class attribute
Every HTML element can carry the ID attribute, each ID is unique and can
only be carried by one HTML element, it can't have the same ID, just like our
IC number. Class attribute is the same as ID attribute, but it can have the
same Class attribute in different HTML elements. The CSS language allows us to
create rules that specify how the content of an element should appear, such as
our background, font type, font colors, etc. All the decoration code was
contained in {}. We tried to decorate our web in Dreamweaver during the class,
Mr.Shamsul showed us a lot of code to decorate our web, such as adding
background, changing font type and colors, adding lines, etc.Ex: Scrip font might not have a good effect on the paragraph, it was hard to read.
|
| Week05/Web decoration exercise |
Instruction
<iframe src="https://drive.google.com/file/d/1WDr6LjbPz7rzqeuoLSDc2fPzvQnd0KSu/preview" width="640" height="480" allow="autoplay"></iframe>
In this assignment, we are required to make a visual resume using prototype
software such as Figma or Adobe XD. The resume needs to contain
a bunch of personal inform, then we we need to focus on the layout and design,
it been told that organizing the section nicely in important in this task, and
we can add some visual elements in our design to make our resume more
interesting, such as icon or image.
Sketch
I sketched out a few ideas, I found my idea online. I decided to make it
simple and play around with the shapes. After sketching out those idea, I
have a idea that I can't make my resume looks like paper with boxes.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
I decided to work with the #2 idea I have drawn.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
|
| Sketches |
I decided to work with the #2 idea I have drawn.
Progression
I use Adobe XD to finish my layout, and then for the image and icon, I do
it with Adobe Photoshop and Illustrator. The font I used was Source Code
Pro, Stencil, and Yu Gothic. My art board size was 1330*1980.
I separate my personal information into 5 boxes, Bio at the top then education, work experience and skills, and contact at the bottom. I am trying to use the plugin to due with the icon, but it doesn't really get the effect I want, I would like to have the effect like a chart to show my ability on each skill. So I use Illustrator and Photoshop to help me complete the icon.
I go search for the software icon online(Photoshop, Illustrator, InDesign,
Premiere Pro, After Effect, XD) and use the tracing and shape-building
tools in Illustrator to help me complete the icon, if the tracing tools
can't work well, I use pen tools and Photoshop to complete the icon.
Then I changed the color of the box because I thought that white color
wasn't a good choice.
|
| Progression-1 |
I separate my personal information into 5 boxes, Bio at the top then education, work experience and skills, and contact at the bottom. I am trying to use the plugin to due with the icon, but it doesn't really get the effect I want, I would like to have the effect like a chart to show my ability on each skill. So I use Illustrator and Photoshop to help me complete the icon.
|
| Progression-2 |
|
| Progression-3 |
Final Submission
Project 1:Prototype Design/Final Submission(PDF)
|
| Project 1:Prototype Design/Final Submission(Jpeg) |
Reflection
It was very important that maintain the balance of the element's alignment, such as text and boxes. Spacing between these elements also has a big impact on the visual effect, it makes the image look more tidy and easy to understand. I think I still need to improve with my composition, I don't that this composition was very fun and interesting, but I think it was organized and easy to under stand, and it might reduce my task in the following assignment that we need to recreate the same resume design into a web page.
No comments:
Post a Comment