Instructor:
Treadway, Dwayne C.
Date:
December 29, 2020
Information:
Quick Glance:
Notes: ART 117 - Design For The Web II |
|||
|---|---|---|---|
Home Page // Assignments // Notes Page // Paper Page // Links Page // Cpanel // Maps // Books // SVGs |
|||
| Date: | Notes: | Grade: | |
| Week 1 |
August 26, 2020 |
He mentioned that homepages are not needed because people have been "trained" to hit the logo. Also, people are using their smartphones and not the larger devices such as a desktop.
Book Reading section one
User Experience (UX) design.
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure where in each node is an object representing a part of the document. The DOM represents a document with a logical tree.
XML is not a specific language in itself, but rather a robust set of rules for creating other markup languages.
NVU: complere web authoring system: free
Beyond Wireframing: The Real-Life UX Design Proces
|
|
| Week 2 | September 12, 2020 | You do not see home pages anymore--people just assume. They click on icons--they expect it to go to the homepage.
a magnifying glass indicates you are going to search.
Web Designers are now called UX designers.
UX design focuses on the interaction between real human users (like you and me) and everyday products and services, such as websites, apps, and even coffee machines.
With phones you swipe up and down and NOT across.
He suggest we print our websites on black and white pages to see if there is enough constrast.
There are going to be lawsuit if you are not Section 508 compliant.
You need to get the load time for your pages.
You need to think globally. Does the consumer you are trying to reach use the iPhone or Samsung. Do your research.
Nobody does verticle swipes.
Bottons are passe.
He does not like links in a carousel.
Make sure the foreign language is correct, use the site babelfish.com
san-serif in the body text and desktop computers.
He says that hexidecimal notations for colors are no longer used: RGBA, HSL, or HSLA
Use hanging indents.
Follow PC standards
Make sure your files are sized 72ppi
You need to make sure there is at least a 1 pixel border so that the images/png does not bleed into the side.
All banners should be linked
Look for inspiration from the Weeby Awards
SVGS are XML based. Use the pen tool to create.
Pen tool smart object--export .svg, save as .svg, export as a smart object. SVGs compress so use for logos.
Wordpress templates are skyrocketing--you need to learn how to manipulate.
When you are creating the basic structure of your site, use all: divs, classes, html standards such as nav, aside,etc.
put javascipt right before the close of the body tag: cut and paste. I think he said to also have it in the head tag.
Use strong/em before a class.
Use alt tags for sound
Always use best practices.
Different tags are used for different browsers, so check how each browser will render your page.
So: H1 H2 H3 ›› H1 The single will override the grouping
Now, they are saying inline styles.
Relative - the element is positioned relative to its normal position.
Absolute - the element is positioned absolutely to its first positioned parent.
Fixed - the element is positioned related to the browser window.
They are saying that we will now be using percents and not fixed positions.
NEW ONLINE AD SIZE RESEARCH REINFORCES BIGGER IS BETTER MANTRA--2003
10 Tips That Can Drastically Improve Your Website's User Experience
Google site to optimize speed
Use this site to see if your site has 404
W3C school for colors--you need to not use hexidecimal for colors.
This is what you would write if you wanted a 50% hover on your images.
.trans { opacity: 0.5;
img: hover {opacity: .7;
|
|
| Week 3 |
Transparent Box: look at the font
loveOR love |
||
| Week 4 | The effect of a well-designed visual hierarchy is largely subliminal.
The HTML specification defines embedded content as follows: content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
The SVG element embeds an image file.
A window for viewing an external HTML source (iframe ) It is iframe is like a browser window withing a browser.
Multipurpose embedding elements (object and embed)
Video and audio players (video and audio)
A scriptable drawing area that can be used for animations or game-like interactivity (canvas)
Inline frames are becoming popular to embed ads.
The sandbox attribute puts restrictions on what the frame content can do.
API: is a standarized set of commands, data names, properties, actions, etc. that lets software applications communicate with one another.
|
||
| Week 5 | September 17, 2020 |
For print style sheets, go here W3C: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
@media {...} Queries for print stylesheets
|
|
| Week 6 | October 12, 2020 | Bootstrap
Native font for Mac: San Francisco
Native font for Windows: Segoe
|
|
| Week 7 |
|
||
| Week 8 | |||
| Week 9 | |||
| Week 10 | November 1, 2020 | WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies
.webp
Sound Article: On click. |
|
| Week 11 | November 14, 2020 | ||
| Week 12 | |||
| Week 13 | |||
| Week 14 | December 1, 2020 |
|
|
| Week 15 | |||
| Week 16 | |||
