CV/Portfolio Website , Digital Media in Art and Design

An assignment was given to create a CV/portfolio website

1) Tutorials are on these sites:

http://www.w3schools.com/html/default.asp

http://code.tutsplus.com/tutorials/design-and-code-your-first-website-in-easy-to-understand-steps–net-6062

https://www.codecademy.com/courses/web-beginner-en-LceTK/0/1

http://www.theage.com.au/it-pro/expertise/nine-great-sites-to-teach-yourself-how-to-code-20140321-hvlc3.html

2) How to view the source code of a web page:

http://www.computerhope.com/issues/ch000746.htm

Chrome (ctrl+U)

Sample of source code for BBC news

source code for bbc

3) Here are samples of existing websites:

http://www.bbc.com/news

http://www.independent.ie/irish-news/

Simple, straightforward design, users can just click on links to get more information.

http://www.awwwards.com/web-design-awards/pauline-osmont-1

Background image covers the screen, navigation bar as footer. Minimal four pages

paulinepauline2

Simple black background with an illustration in the middle.

locuma1

Another designer’s site:

http://www.rebeccadautremer.com/

page

I love the simplicity, screen filled with an image and minimal info:

http://www.awwwards.com/web-design-awards/karim-rashid

karim karim2

Simple illustrations and block bold colors.

Sam Markiewicz – Flat UI Design Website

https://s-media-cache-ak0.pinimg.com/736x/c0/04/7b/c0047b5ac2db98d7ddf7a6499f7127d6.jpg

http://www.massimobonini.com/en/home/

yo

yo2

I like the simplicity, one page has all the information, one colour.

More samples on this website:

http://www.wix.com/blog/2014/01/artist-website-examples/

Sample of web page layout found online:

More layout samples available on the link below:

http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

screenshot

screenshot

https://webflow.com/blog/examples-of-unique-website-layouts

https://www.whitehouse.gov/

Screen Shot 2015-11-05 at 12.30.58

Sketches done in notebook:

IMG_20151110_122442IMG_20151110_122435

Wireframes done in Photoshop:

WIREFRAME

WIREFRAME4

Self Evaluation/criticism

First Draft

Header, text disappears into the stripes. Description font too big, turquoise background color hurts the eyes.

Screen Shot 2015-10-15 at 13.14.31

Second Draft

Header too distracting. Colour combination to loud. Images too big

draft2

Third Draft

Using a different header done on Photoshop.

draft

With the problems I’ve encountered, solutions and tutorials were found on W3 Schools and other websites:

How to insert links to images:

http://www.echoecho.com/htmllinks06.htm

http://stackoverflow.com/questions/21532976/ul-is-not-inside-div-container

Screenshots taken on mobile phone of tutorials from W3Schools

Screenshot_2015-10-20-21-16-02Screenshot_2015-10-20-11-43-19Screenshot_2015-10-20-11-48-19

Feedback from Lecturer

3/1/2015:

Text too plain, need to reconfigure, place them in containers, add a little color, different fonts as example in BBC news website.

5/11/2015:

To arrange images in gallery on white background, grid style. Minor changes to text in content. To reconfigure About Me page.

Sample of ‘About Me’ page:

Finally, 5 pages completed!

Main Page:

final1

About Me

final2

Education

final4

Work Experience

final3

Gallery

final

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s