Project 4

those who wish to sing cc-by lemasney
those who wish to sing cc-by lemasney

Introduction

In project 4, you will be developing a web presence. You will develop an online identity using whatever tools you wish to create and publish the site. The site can be a part of a service, social media platform, etc. It must be a working, world accessible site, such as WordPress, but can be Twitter, Pinterest, Instagram, Facebook, Wix, Weebly, SquareSpace, etc.

Details

The effort for the project should be new, starting as of April 18th, and gathered around the main topic, such as a portfolio, etc. rather than reconstituted from some other project outside of class. The site should have at least 20 destinations (nodes, posts, pages, etc.) of original content from after April 18th. On our last day (May 9th), you will answer some variant of the following questions while demonstrating your site content for the class.

  1. What did you use to develop your site? How does the navigation work?
  2. How was it different/similar from other tools we used in the class? How do you make changes?
  3. What customization methods did you use? Was there a way to edit CSS or HTML?
  4. How does this reflect you (or not)? What imagery, design, palette, texture, and photographic choices did you make?
  5. Is there a use for this in your future?

Remaining timeline:

April 18th: Project 3 final review, Project 4 Introduced.

April 25th:Project 4 topic confirmed and first efforts reviewed.

May 2nd: Progress reviewed. Presentation demonstration.

May 9th: Final presentations

Projects 3 and 4

schedule

Project 2 Review: Open your site and explain how you solved the problem of creating a six page site in HTML and CSS in Dreamweaver. Talk about your choices in style by opening your stylesheet and explaining it.

Project 3: Create a WordPress.com site about the same (or similar) topic you chose for Project 2. Be able to explain the features, benefits, and navigation of your site. The site should have 10 posts related to your main topic. The site should have 5 pages related to your main topic.  Themes should be carefully chosen and customized. Posts should be crafted with the intent of building an audience. Your colors, graphics, and photography should have consistency in style and effect.

Project 4: Make a professional website for your future independent business. Use whatever tools you wish to create the site. The site should have at least 20 destinations of original content. The visual and written content should be of the highest quality.

WEEK 4 (2/10-2/15)

Lecture:

  • Review of HTML site so far and CSS so far.
  • How do you save, open and edit someone else’s site?
  • How do you use the element inspector in Chrome?
  • How do you link a CSS file? How do you add images? How do you position DIVs?

Demo:

  • Let’s develop the entire solution for everything so far.
  • Editing and testing your Website

Resources:

Preparing images for the web in Photoshop

Inserting an image into HTML

Color codes for major brands:

http://brandcolors.net/

Color palettes from Google

“Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.” found in Color – Style – Google design guidelines at https://goo.gl/U8pRbP

How to critique:

Code:

HTML elements CSS selectors CSS properties
  • <img>(alt and src attributes)
  • img
  • vertical-align

Review:

  • FTP basics
  • Working with images
  • Working with Wireframes

Due Next Week (2/17):

Discussion Question:

4: BACKGROUND & CONTENT IMAGERY

Pick a website that has a compelling design and identify the message or personality that is communicated by the website. Describe one of the background images used in the website (it can be the background of a div or the body). Discuss how the texture, scale and pattern of the background contribute to the message. Describe one of the content images used in the website. Do the content images and background images play different roles in the website you chose? Explain your answer. (Please include a link.)

Project 1:

Personal Website (Historical Figure) (20% of your grade)

For this project you will pick a historical figure who died before 1923. You will create a webpage in the style of wikipedia for that figure that conveys who that person was through the text and through the design. You will use the text from wikipedia and create your own images in Photoshop or from public domain images. The only requirements are that you can only use one representational image of the person, the rest of the images must be non-representational.

Project 1 Rubric

WEEK 3 (2/3-2/8)

Lecture (lemasney):

“Unless you are a graphic designer by training (like me!), chances are you’ve never needed to understand things like what separates a TIF from a PDF or a PSD. While the large variety of image formats may seem overwhelming, there is a method to the madness. We’ve put together a useful outline to help you understand the difference between each file format, and when they are appropriate to use.” found in How And When To Use Different Types of Image Files at http://goo.gl/pZn19l

Introduction to Imagery

Demo (lemasney):

Introduction to Photoshop (Adobe)

Resources (self-driven learning):

CSS Layout Tutorials (Continued W3 Schools)

Layout Basics (w3 schools)

Positioning a Block (w3 schools)

Styling the Box (w3 schools)

Working with images and linear elements:

Creating a background image

  • “In this article you will learn about the different large background styles and how to use them. You will also find out about the impact that large backgrounds has on bandwidth and site performance in general. Finally you will learn how to properly implement large backgrounds.” found in Large Website Backgrounds Do’s and Don’ts | Webdesigner Depot at http://goo.gl/KoOk

Adding shapes, lines and patterns

Saving the image for the web

  • Save For Web (Adobe)
  • hint — save your .psd files in the project1_extras folder
  • hint — save your optimized files (.gif, .png, .jpg) into the project1_website folder

Inserting backgrounds into CSS

Code (be able to discuss):

HTML elements CSS selectors CSS properties
<div> id selector (#)
  • width (container 900px)
  • height (do not use)
  • min-height
  • position: relative
  • float
  • border-style
  • border-width
  • border-color
  • outline-style
  • outline-color
  • outline-width
  • margin
  • padding

Tips

  • If you add the overflow:hidden property to the containing CSS div element in CSS–the background color will stretch to include floated elements.
  • If you add margin:0px to the header(h1, h2, etc.) and body elements in CSS you will get rid of extra space between elements.
HTML elements CSS selectors CSS properties
  • background-image
  • background-repeat
  • background-position
  • background (optional)

Review:

  • New HTML
  • New CSS
  • Photoshop review

“If you’re a designer and you’re not subscribing to RSS feeds, I strongly encourage you to start. RSS, short for “Really Simple Syndication” is a format for delivering regularly changing content (i.e. blogs) to a single user. The old way of browsing the web involved bookmarking and visiting sites whenever you wanted to check for updates. RSS and accompanying RSS readers bring news stories, blog posts, etc. to a central location whenever new content is published. Basically, it does all the hard work for you and gives you a bucket full of content ready for consumption.  For more information on RSS, check out this RSS in plain English video. It provides a great overview and will help get you started.” found in 75 RSS Feeds Every Designer Should Follow: Design Community Connect (Part 2) at http://goo.gl/vWAVP

Due Next Week (2/10):

Discussion Question (answer with a Google Drive Document):

3: TEXT TYPEFACE

Find a website where you think the text type contributes to the visual design. Describe how the choice of serif/sans serif, font-color, weight, style and type size impact how easy it is to navigate the website and how these choices contribute to the overall message. (Please include a link)

Weekly Assignment (answer with HTML):

3: HTML with CSS & Layout

Add layout elements and style rules to your historical figure wikipedia page.

Content Requirements: (minimum)

  • 1 headline
  • 1 sidebar
  • 3 paragraphs
  • all names of people linked to their wikipedia pages

Technical Requirements: (code from agenda)

  • you must use relative positioning
  • you must have a floating element
  • you must have at least two div elements
  • the width of your main element must be 900px
how to become an explorer of the world cc-by lemasney

WEEK 2 (1/27-2/1)

Looking back:

  • A look back at Week one.
  • A review of Google Drive
  • Sharing Drive folders/files to public versus sharing to me
  • Revisions in the syllabus and site are ongoing.

Lecture:

Read the following article in the next few minutes.

“This whitepaper explains the underlying infrastructure and technologies that make the Internet work. It does not go into great depth, but covers enough of each area to give a basic understanding of the concepts involved. For any unanswered questions, a list of resources is provided at the end of the paper.” found in How Does the Internet Work? at https://goo.gl/2P1aXj

Reading review:

  • What is an IP address?
  • What is the Domain Name Service (DNS)?
  • What is HTTP?

Questions to ponder, then be able to answer clearly, this week:

  • What is FTP and SFTP?
  • What is HTML?
  • What is CSS?
  • What is source code?
  • How do I see the source code?
  • How can I play with the CSS?
  • What is a server?
  • What is a client?

Demo:

File Directory and structure:

  • Domain Structure versus Server File Structure
  • The HTTP and FTP servers
  • The home directory on the server
  • The public directory for html
  • your files and folders

File structure rules:

  1. File names have no spaces or strange characters
  2. File names are lower case
  3. All files in folder named project1_website
  4. Folders named images, fonts, js inside project1_website folder
  5. All images are inside the images folder
  6. External stylesheet called project1.css
  7. All css in external file
  8. No psds uploaded
  9. All pages titled
  10. All images have alt text

Important basics of web development:

Resources:

Introduction to HTML (w3 schools)

Inserting HTML Elements (w3 schools)

CSS Basics (w3 schools)

Adding CSS Rules (w3 schools)

Code:

HTML elements
  • <!DOCTYPE>
  • <html>, <head>, <body>, <title>
  • <p>
  • <h1>, <h2>,
  • <hr>
  • <!– –>
  • <br>
  • <a>

 

HTML elements CSS selectors CSS properties
  • <link>
  • body
  • h1, h2, h3
  • p
  • a
  • a:link
  • a:visited
  • a:hover
  • a:active
  • grouped selector
  • hr
  • background-color
  • color
  • hex & rgba(255,0,0,0.3)
  • font-family
  • font-style
  • font-weight
  • font-size
  • text-transform
  • text-align
  • text-indent
  • text-decoration
  • border
  • height

 

Review:

  • CSS tutorials
  • HTML tutorials
  • Coding tools

Questions to be able to answer:

  • What is HTTP?
  • What is FTP and SFTP?
  • What is HTML?
  • What is CSS?
  • What is source code?
  • How do I see the source code?
  • How can I play with the CSS?
  • What is a server?
  • What is a client?

Due Next Week (2/3):

Remember to share a single Google Drive folder with me with the name “DMA145 – lastname” where lastname is your actual last name, e.g. DMA145 – lemasney. In it, place four folders, project1,project2,project3, and project4.

In each of those, put your weekly assignments. weeks 1 through 4 in project 1, and so on. Put your answers in the project folder we are working on, named sensibly: Drive/DMA145lemasney/project1/question 1 on color.doc or something like it. When you put anything inside the DMA folder, anywhere in it, even subfolders, I’ll have access to see it.

Discussion Question:

2: HTML ELEMENTS

Look at the source code for the website you picked last week. List the HTML elements that are used in the homepage of the website you picked. How does the code of a website that is online differ from the code you created this week? How is it the same? Is there anything that surprises you about the way that the code is written? Support your answer. (Please include a link.)

How to view source code tutorial (Wikihow)

Weekly Assignment:

Basic HTML

Create a basic HTML page for your historical figure. You can copy and paste information from their wikipedia page.

Content Requirements: (minimum)

  • 1 headline (H1-H6)
  • 1 sidebar (DIV container)
  • 3 paragraphs
  • All names of people linked to their wikipedia pages

Technical Requirements (use elements from Code section of agenda)

The most dangerous phrase in the language

WEEK 1 (1/20-1/25)

Lecture:

  • Syllabus Overview
  • Introduction to Color
  • What is a styletile?
  • Using Google Drive to share.

A review of HEX and RGB values (lemasney):

Color can be represented in many ways. You can say “That’s blue” or “that’s rather red.” That’s not enough in web design, or any final design. We want the right red.  So if we want a particular red, we can use several classification systems for color to be able to share the right red.

We could express it in RGB values, from 0-255, where higher is more. RGB 255,0,0 is pure red. HEX #FF0000 is pure red. A mixture of numbers results in a mixed color: RGB 255,0,255 (full red plus full blue) is bright purple.

HEX ranges are 16 values per color, zero through F: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F and can be expressed in 2 digit pairs per color (white is #FFFFFF), or one digit per color (white is also # FFF). each character (0-F) is an increasing value of that color, Red, Green, or Blue, expressed singly (#F00) or in pairs (#DF00FF). Purple in HEX would be #FF00FF.

But the most interesting bit is you don’t need to know any of that. You just need to use tools to determine your colors, and record the value as hexadecimal or RGB. Either one works.

color-models

About Color Models

One of you shared that you were not sure why the primaries of Red Blue and Yellow are different than RGB and Hex values, and my answer is that Red Blue and Yellow are about color theory (for working out palettes) and RGB is about the digital interpretation and classification of color in light. One is ideological, the other is about recording color. The real difference is that RYB is additive color (pigment based) and RGB is reductive (light based).

“Colour values tend to be originated by designers (such as myself) who would never encounter hex notation anywhere else, and are much more familiar with the decimal notation which is the main way of specifying colour in the apps they use — in fact I have met quite a few who don’t realise how a given hex value breaks down into RGB components and assumed it didn’t directly relate to the colour at all, like a Pantone colour system reference (eg PMS432).” found in colors – Are there any good reasons for using hex over decimal for RGB colour values in CSS? – Stack Overflow at http://goo.gl/0M8nYa

INTRO: Project 1

Personal [Historical Biography Page]

For this project you will pick a historical figure who died before 1923. You will create a webpage in the style of wikipedia for that figure that conveys who that person was through the text and through the design. You will use the text from wikipedia and create your own images in Photoshop or from public domain images. The only requirements are that you can only use one representational image of the person, the rest of the images must be non-representational.

Project 1 Rubric

The reason for the death pre-1923 restriction in the assignment is to avoid copyright issues. Photos taken before 1923 are typically in the public domain, as per US copyright law:

“In the United States, determining whether a work has entered the public domain or is still under copyright can be quite complex, primarily because copyright terms have been extended multiple times and in different ways—shifting over the course of the 20th century from a fixed-term based on first publication, with a possible renewal term, to a term extending to fifty, then seventy, years after the death of the author. The claim that “pre-1923 works are in the public domain” is correct only for published works; unpublished works are under federal copyright for at least the life of the author plus 70 years.” found in Public domain – Wikiwand at http://goo.gl/1wbGnd

Demo:

Resources:

Basic Color Theory: https://www.youtube.com/watch?v=lqzYUIh0Dcg (YouTube)

Color Palettes for Branding: https://www.youtube.com/watch?v=d1a1fun6OfA (YouTube)

Using Google Drive to Create a Styletile:

https://www.youtube.com/watch?v=5mJNFp1-uw8&feature=youtu.be (Sweeney)

StyleTiles explained:

http://styletil.es/ (Styletil.es)

How a Web Site Design Goes to Hell:

http://theoatmeal.com/comics/design_hell (The Oatmeal)

Review:

  • Give an example of a complementary color scheme.
  • How do you use color tools to establish strong palettes?
  • How do you share a publicly accessible link to a Google Doc?
  • How does color affect your design?
  • How does a StyleTile help you to visualize your look and feel?
  • Ideas to know: complementary color, analogous color, style tile, Google Drive, Google Classroom, WordPress, Syllabus, Agenda, Contact info.

Due Next Week (1/27):

Discussion Question:

1: Color:

Pick the website of a musician, writer, athlete or artist that has an compelling design and identify the message or personality that is communicated by the website. Describe the way that the dominant color, color palette, chroma and value contribute to this message. (In the future you will use Google Classroom to submit your answer, but for now, please just leave a comment here.)

Weekly Assignment:

1: StyleTile:

Create 3 styletiles using Google Drive’s Drawing tool. Use 3-5 images, colors, and fonts in each styletile. Look at the example for guidance, You should look for images that have textures or patterns that you will be able to use in the design of your historical figure website. Provide variation in your tiles and play with the style.

Share your StyleTile in PNG format in Google Classroom in the StyleTime assignment listed there. The colors and images should work together to convey the messages you chose to describe your historical figure’s brand.