Week 10B

Wednesday, April 4th, 2018

Homework for Today's Class:

•  Read Above the Fold Chapter 3
• Find 3 Kickstarter projects with no/bad website and write ~100 words on why you want to do this project. 

In Class:

   We were tasked with further researching the projects we've been assigned. The research should help shape the initial idea of our website, in terms of form and function. Since I've decided on using the SmartBunch lightbulb project, I took a closer look at their Kickstarter page.
 
   In terms of information about the product, SmartBunch's Kickstarter page is filled with details about their product: everything from the construction of their lightbulbs to the possible uses, as well as the usual Kickstarter pledge information. What the page does lack is design, as Kickstarter's format doesn't allow for many of the freedoms that an unobstructed HTML webpage would have. I think that the triangle-based design of the product allows for an easy method of brand reinforcement via bringing the same triangular design over to the website. Trying to find a simple way to display the concept of amorphous, interlocking triangles without extensive code or animation seems like it might require some thought, but isn't impossible.
   
     When it comes to adding to or enhancing the content, one of the first things I thought of was that they don't sell products individually, or even in a grab-bag format, instead marketing them in pre-sectioned boxes of varying sizes. While this makes sense, I feel the opportunities for mixing and matching different styles of the SmartBunch triangles are much more open if you can order specific amounts of product. With this in mind, a menu

• Subject Matter:
  • Magnetic triangular smart light bulbs or other tech parts that can be rearranged around one of three base types
  • List of Features:
  • Triangular
  • Functional (wattage)
  • Magnetic
  • Rearrangeable
  • Smart
  • IR, light and motion sensor/camera/mic
  • Speaker
  • Phone connectivity (through Wifi or BT?)
  • Portable
  • Aesthetic Design (variable materials)
  • Power usage
  • 
    
  • Content I would like to see on a website:
  • Functions
  • Product list w/specs
  • Product information/prices
  • Design elements that mimic the function of the product
  • Gifs highlighting usage of product
  • Contact information for the company
  • Reviews/credibility
  • Name of product/logo of product
  • plans for future products
  • delivery options/product availability
  • easily accessible navigation for a longer page
  • Specific Ideas:
  • Borders made of the triangles with various elements and materials
  • Triangular-based design (either through negative space or window shape
  • List of products with specifications, materials, and price
  • photoshopped background utilizing photos of the SmartBunch lightbulb as a texture
  • usage of the LED pattern on the product as a texture
  • 
    

    Content Paragraphs

Homework for Next Class:

• Read Chapter 4
• HTML 101 and CSS 101
• Post Research to blog
• write a list of content areas for your web site

Week 10A

Monday, April 2nd, 2018

Homework for Today's Class:

• Watch number 5 and 6 of www.dontfeartheinternet.com
• Finish both PDF's HTML 101 and CSS 101 (part 1 and 2) and post code on blog
• Finish adding CSS to website
• Above the Fold Intro and Chapter 2
• IID: display factors, grid systems, page fold, scanning vs reading

My brief

In Class:

• Review Chapter 2
• Notes on CSS

• Find Kickstarter Projects

SmartBunch^TM lightbulb
https://www.mysmartbunch.com/
https://www.kickstarter.com/projects/292583605/smartbunch-the-worlds-first-modular-light-bulb

     SmartBunch^TM lightbulbs look like a blast to use, feeding into the user's easy-to-change creative needs while remaining functional. I remember playing with magnetic geometric shapes when I was a kid, and these scratch that nostalgia itch as well. The constantly rearranging triangles, as well as the other design elements of the lightbulb and the lack of a decent website make this a project I'd like to pursue. 

Leave Me Alone^TM Sweater
https://leavemealonesweater.com/
https://www.kickstarter.com/projects/1580086459/leave-me-alone-sweater

     The Leave Me Alone Sweater^TM immediately struck me as a project I'd like to personally own. I've had hoodies that work in a similar manner before, but none where the entire premise was based on the hood-zipping feature. The website for this product was a laggy .gif with text overlayed, and I think designing a more content-heavy site for this would be fun. 

Human Food^TM Food Bar
https://www.kickstarter.com/projects/1313545942/human-food-0?ref=discovery&ref=discovery

     Human Food^TM is a nutrition bar catering to those on a plant-based food diet. It hits most, if not all of the hyper-healthy foodie checkboxes (non-GMO, gluten-free, Paleo, etc), as well allegedly tasting pretty good for something with no added flavor-enhancers. The three things that drew me to this project were the super simplistic packaging, the design opportunities a wrapped package has, and the fact that they have no individual website.

Homework for Next Class:

•  Read Above the Fold Chapter 3
• Find 3 Kickstarter projects with no/bad website and write ~100 words on why you want to do this project. 

*Updated 4/3

Week 9B

Wednesday, March 28, 2018

Homework for Today's Class:

• Read Chapter 1 of Above the Fold
• Work on Vacation Page HTML

In Class:

• Review Chapter 1
• Go over CSS notes
• CSS Basics
• Box Model
• Wrapping
• Add CSS to Vacation Page

 CSS Notes:

• CSS: Cascading Style Sheet, applies styles in sequential order
• Inline: Quick-fix, sloppy, inside code brackets
• Internal: Inside <head>, using CSS syntax, still inefficient
• External: Most efficient, separate CSS sheet called by <href> in <head>
• CSS Syntax: Selector and {Declarations}
• <div> and classes: 
• ID: a one-time use class. Don't mix this with classes!

CSS updates during class

Homework for Next Class :

• Watch number 5 and 6 of www.dontfeartheinternet.com
• Finish both PDF's HTML 101 and CSS 101 (part 1 and 2) and post code on blog
• Finish adding CSS to website
• Above the Fold Intro and Chapter 2
• IID: display factors, grid systems, page fold, scanning vs reading

Week 9A

Monday, March 26, 2018

Homework for Today's Class:

• Purchase Above the Fold

In Class:

•  Discussion of HTML Basics
•  Notes on HTML basics  
• Looking at http://www.dontfeartheinternet.com/
• Working on homework for Wednesday, March 28

     Our in-class/take-home assignment for today was to create a webpage for a vacation spot we'd like to visit, using only basic HTML code. I decided to feature my room as the vacation spot, as it's the only place I generally like going. Besides utilizing the basic structures of HTML minus the usual CSS fancy bits, I decided to do some in-page styling to spice up my page. 

Below are images of the work-in-progress website, as well as the code I have so far:

Website WIP 1

Website WIP 2

HTML code for website

Next Class: 

• Complete Website 
• Read Chapter 1 of Above the Fold