Design your Digital PortfolioCOGS3

PART Aideas

&coding BASICS

Keep the following in mind as you work on this assignment:

Poster by: Krissy Venosdale

Select five examples of portfolios that appeal to you

1. Write a webpage with links to the five portfolios that appeal to you.a. Complete the HTML Layouts and Bootstrap Navigation tutorials before you code your page.

b. Design a page using the skills you learned and create a webpage that include the following elements:

2. Images of each portfolio example (with a link to it).

3. Critique the elements of each portfolio (as the content on your website.) Are they consistent with the “image” you want to present to a potential employer?

Is the page overdone? Too busy? Not enough details?

Does it convey professionalism?

How does that portfolio identify or reveal their skill set?

4. Analyze and Evaluate the webpage in terms of: Simplicity

Design style: Skeuomorphism vs. Flat/Minimalist

Font selection – does it complement or distract

Color analysis

5. Create a directory on the server in your public_html called:portfolio

6. Save your webpage as: partAcg3xzz.html

Create, critique, analyze, and evaluate

Hint: it is a good idea to start curating ideas and images and websites as you think about design.

Complete the HTML layouts tutorial on w3schools.com

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

Complete the bootstrap navigation bar tutorial on w3schools.com

http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Your webpage should have

the following html-css

items:

( w3schools.com has examples for all

of these )

1. Multiple column layout (using<div> element not <table>)

2. All of the HTML5 semantic elements (must use these) <header> <nav> <section> <article> <aside> <footer> <details> <summary>

3. Your webpage should be responsive

4. Use iframe and have a bootstrap navigation bar

5. Use appropriate CSS styling (minimum must have these): float padding text-align clear line-height

Think about these example layouts:

Motivation to create a digital portfolio:

1. It is a chance for you to put your best foot forward.

2. Companies today will use your digital footprint (see article below) to make a decision on whether to hire you or not.

http://www.huffingtonpost.com/2011/08/04/new-infographic-shows-how-companies-target-unemployed_n_918816.html

Takes visual cues directly from familiar objects and tries to emulate physical interfaces, interactions and behaviors on a 2D display

Compare skeuomorphic with flat design

5 elements of a flat design:

1 No added effects

Flat 2-D style with a clear sense of hierarchy and placement of elements

2 Simple Elements

Simple user interface elements – buttons and icons – simple shape – easy to use.

3 Typography Focus

The tone of typefaces should match the design scheme. Simple and efficient wording.

4 Focus on Color

Color is a large part of the flat design. Retro colors are popular.

5 Minimalist in spirit

Simple color, simple text, simple photography.

http://www.oxfordhouse.nl/ http://uncharted.sunbrella.com/ http://karimrashid.com/

http://www.makeuseof.com/tag/find-the-perfect-color-scheme-every-time-with-adobe-kuler/

Read this article on how to use Adobe Kuler

(Adobe Color)

http://www.makeuseof.com/tag/find-the-perfect-color-scheme-every-time-with-adobe-kuler/

https://color.adobe.com/

http://fashionclassroom.com/blog/how-to-use-kuler-for-color-palettes