& so the task for Assignment 1 is to design and create a website to serve as a portfolio for my NM2208 assignments. Special attention should be paid mainly to the typography, layout, colour scheme and composition of the website. Also, the website should fit nicely into the 1024 X 768 resolution. The aim of this project is to utilize the advantages of Cascading Style Sheets (CSS) for my website apart from the proper organization of type and content.
Alrighty, so for the web portfolio I had 2 main themes in mind, one was a simple and clean look, and the other I wanted more of a sketchy feel to it. The stuff that I intend to display in my portfolio are: Homepage, Work, About, Contact. My assignments will all fall under Work where I will have my final pieces displayed up together with the work-in-progress pieces.
After much thorough thought process, I have decided that a good website is one that is simple and easy to navigate, and one that is not too cluttered with too many elements to draw the attention away from users. Though keeping things simple is the way to go, there should still be some form of design to make the website visually appealing to the users. Furthermore, reading texts on the screen can be quite a challenge given people’s short attention span, hence, I intend to limit the amount of texts on my website in order not to lose the attention of my users.
& we all know that inspiration doesn't just fall onto your lap one fine day, you got to go out there and source for inspirations. So I did my research by going through several designers’ websites which are available on the Internet in order to source for ideas on the kinds of layout, typography, colour scheme and composition which they had adopted for their websites. The main site I went to get inspiration from was http://www.newwebpick.com. From browsing through these websites, I learnt the importance of having a consistent layout, clear and easy to read texts, the good use of space, and paying attention to finer details to aid easy navigation. Most of the websites found, apply a good use of CSS to standardize the design and style so as to ensure consistency. It is quite rare to find websites that are not using CSS these days. It was also noticed that most websites adhere to the Rule of Third together with a 2 column or 3 column layout. Furthermore, depending on the purpose of the websites, some websites are found to adopt javascript for animation to enhance the interactivity of their websites. Also, designers’ websites employ more graphic design in their layout, with fancier fonts so as to give their websites a creative edge. Generally by default, website headings have fancier and larger font sizes than the text body, and each website often comprise of 2 to 3 different fonts. I believe these factors help in retaining the attention of users.
& after getting down to work on those 2 themes, the following Homepage and main Work page were created using Photoshop to be used for the tutorial critique session.
Design One:
Design Two:
Font Samples:
For the homepage font, I decided to have more fancy-looking cursive fonts for the headings that can match the theme of a design portfolio. Below are my homepage font samples for the headings that do not take into account the main font for the body. Please take note that the size of the fonts below does not represent the actual font size.
For the words written in the body of the website, I have decided to go with a much simpler font design compared to the fonts used as the headings in the homepage. Simple fonts for the body will give the website a much overall neater design, as well as increase the readability of the website.
Personal views on the designs:
Design One:
The figure and ground does not have a very distinct good separation due to the lack of contrast since the entire body of the layout is in white even though the accented neutral colour scheme is being adopted. As such, there is no clear boundary between the navigation area and the content of the body, making it seem as if the navigation area is part of the body. In terms of typography, there seems to be a lack of variety where the design is mainly dominated by 1 font type, other than the homepage which has 2 different font types. Although there are attempts to adhere to the Rule of Third and apply the 3 column grid layout to present the work pieces in thumbnails, the overall presentation seems a little dull and messy due to the lack of colours and bad separation for figure and ground.
Design Two:
Unlike Design 1, there is a good separation for figure and ground in this case where there are clear boundaries between the navigation area and the body through the use of distinct borders and colours. Similar to Design 1, the colour scheme adopted is the accented neutral colour scheme combined with the monochromatic colour scheme to present a calm feeling with tinge of excitement. In terms of typography, variety is observed whereby there is at least 3 different font types dominating, with exception to the homepage which has 4 font types. Again, there are similar attempts made to adhere to the Rule of Third and to apply the 3 column grid layout to present the work pieces in thumbnails. However, the overall presentation is not as dull as Design 1, and much neater as well.
Design Specifications:
FONT:
The fonts used for the homepage headings are Lobster 1.4, and Marcelle Script, with Tangerine as the font for the word “Blog”. Lobster 1.4 and Marcelle Script were selected for the headings because out of all the samples, though they were regular font size, they appeared to be bolded, hence looked the most suitable for headings. Besides, both font types appear quite similar although there are some slight differences, as such, when they are used together it will provide some variety but not entire stark difference. The body font for the entire website will be Times New Roman because it has a professional feel to it compared to the rest of the samples, and it appears to be much more compact in size compared to Arial and Verdana. Therefore, by using Times New Roman, my text body does not seem to stretch too long.
PAGE LAYOUT:
To adopt a good design structure, the navigation area will be separated from the body, and also it will adhere to the Rule of Third, with a 3 column layout. As such, it will be clear where the links are and where the body of content lies. Also, there will be a consistent layout margin throughout the website to provide a breathing space that can help capture and hold the users’ attention by keeping their eyes within the frame. Furthermore, text and images will not overlap with each other so as to add to the readability as well.
COLOUR SCHEME:
For the colour scheme, I have decided to mix both accented neutral colour scheme together with monochromatic colour scheme so as to achieve some gradients in the colours to add to the calming effect, and with tinges of red as well to prevent the layout from becoming too dull. The parts in red will help draw the attention of the users to the particular content in the body.
Problems Encountered So Far:
I experienced some unexpected problems when it came to the layout for Assignment 3 and Assignment 6 because these were image intensive assignments. Handling so many images became a problem because some images were vertical while others were horizontal, and this affected the alignment which in turn affected the layout. Furthermore, having so many images to deal with, I did not know how many images I should fit into a page such that these images will not be too small to be seen or too large such that they take up too many pages. I've thought of using an image slider to make things neater, but still being a HTML noob, I've yet to figure out how to make it work!
Next, I've yet to solve the problem regarding the print friendly version - my images somehow don't seem to appear and I don't know why :(
Ahwell, seems like I need to seek help from Luo Lan soon!
Critique Session:
Surprisingly the comments which I had received were really unexpected. The class actually prefers Design One over Design Two - a total opposite from my own preference! I remember someone using a metaphor saying that Design One is like Mac while Design Two is like Microsoft (hmm...doesn't sound too positive). & there were others who said that Design Two looks more like a certificate while Design One has more style to it. I personally feel that Design One seems a little messy in terms of the layout compared to Design Two. Besides, Design Two has more of a cleaner feel, and has more of a potential to be a professional web portfolio. My gosh, internal conflict of the 21st century! What a dilemma!
Anyway, after getting all the feedback from the class, I've decided to stick to my own preference and choose Design Two, but improve on the points that were raised during the critique session. It was really quite an internal struggle deciding which design to choose. But after having much debate in my own head, I've figured that my portfolio should represent me; it should be something that I like creating and feel proud of to put my works in.
I believe in life there will be many other instances such as this where I would have to decide whether I should be doing things that others prefer, or doing things that I really like. & I guess it all boils down to the individual self. If we're constantly doing things that others prefer, and neglecting our own interest, then life wouldn't be as fulfilling; you wouldn't feel much sense of achievement since you're constantly living for others instead of yourself. What's the point of doing something that you have no passion for? Without much passion for what you're doing, you'll just put in minimal effort which will just produce substandard work. That is not to say that comments from others are useless! They are useful, and we should take every comment seriously and incorporate these ideas from others into our own, to make it an even better piece of work.
& just from this critique session alone, I've learnt to...
*EDITED at a later time...
Okay so it's been a week or so since I've handed in my website to Julian! PHEW, one hurdle down and another 4 more to go!!
Firstly, for any of you who wish to find a workable and easy to implement image slider, you've so got to check these 2 Youtube videos out!! THEY LITERALLY SAVE MY LIFE & SOME BRAINCELLS!! I've been searching for an entire week for an easy and workable image slider but to no avail, everything I found just didn't work which really made me wanna pull my hair out...until I found this 2 Youtube videos! I'm forever thankful for the creator! THANK YOU!!
Here's the 2 videos...
Alright, so now for the finalized version for my website (doubt I'll have the time to edit anymore for the portfolio). Hope y'all will like it because I was really on the verge of throwing my guts up trying to fix the alignment of the print.css versions! Sometimes it worked fine, other times it refused to, which was super annoying and such a nightmare especially with the bugs in the browsers which I have no idea how to fix! Thank goodness it's over now (hopefully)! I don't ever want to be a web designer!
Okay, without further ado, here's the screen shots of the Homepage, as well as the Work page.
Hopefully this 2 screen shots will entice you enough to go check my website out! I'll continue working on my website after this semester to add in the assignments for NM3208, so do drop by often! :)
Here's the link to my web portfolio.
http://3208.thevisualodyssey.com/
*for optimal viewing, please view the website in 1024 X 768 resolution!
ENJOY!
0 comments:
Post a Comment