Critique Designs and More Practice Coding Layout Pages

COGS3

ideas&

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 tutorials before you code your page.

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

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

2. 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?

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

Design style: Skeuomorphism vs. Flat/Minimalist

Font selection – does it complement or distract

Color analysis

4. Create a directory on the server in your public_html called:designCritique

5. Save your webpage as: design_cg3xzz.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.

Work through the different 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

experience using the following html-css

items:

( w3schools.com has examples for all of

these )

1. Consider using Bootstrap4 flex column layout

2. All of the HTML5 semantic elements <header> <nav> <section> <article> <aside> <footer> <details> <summary>

3. Your webpage should be responsive

4. Use bootstrap navigation bar

5. Use appropriate CSS styling

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)

https://www.makeuseof.com/tag/10-sites-play-colors-create-color-palettes/

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

skeuomorphism

Metro design and the beginning of modern UI

the same experience everywhere on desktop, tablet and mobile

http://www.intacto.com/projects/flatvsrealism/

http://www.intacto.com/projects/flatvsrealism/

Why flat design?

It works because it is:

SimpleAnd

Intuitive