Week 11A

Monday, April 9th, 2018

Homework for Today's Class:

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

In Class:

• Apply content areas to physical sketches and mockups

asdf

                                   

asdf

asdf

asdf

Homework for Next Class:

•  Read Chapter 5
• Explain your design decisions on the blog

Week 12A

Monday, April 16th, 2018

Homework for Today's Class:

• Read Chapter 6 of Above the Fold
• Finish Style Tile

my style tile

In Class:

• Started HTML outline of our website

    Content Paragraphs

Homework for Next Class:

• Finish HTML structure of website 

Week 13A

Monday, April 23rd, 2018

Homework for Today's Class:

• Have 25% of the Webpage completed

In Class:

• 
  

    Content Paragraphs

Homework for Next Class:

•  75% done

Week 13 Out of Class

Images Folder

Top of Webpage

List of Product Features

List of Product Pieces

Bottom of page

Top of Code

Text code

Photoshopped top image

How I did the weird bars with the triangles

Week 10 Out of Class

Logo: 

• Text logo of Smartbunch, maybe incorporate their normal lo

Picture:

• top bar picture of smartbunch
• 
  

Mission Statement:

• SMARTBUNCH is the world's first modular light bulb. It offers flexibility never before seen in lighting. Change shape, style, format & strength as it suits you.
• typography heavy on this, emphasize buzzwords with color/style/type/etc.
• floating 

How it works (brief): 

• Magnetic triangular frames house LEDs that power each other when linked to a power source. 
• There are four current power sources (ceiling, lamp, rechargable, and lightbulb)
• Since frames are magnetic, they can be assembled into 3D or 2D shapes that match your lighting needs
• Come in a variety of different materials to match style of decor

Description of product:

• Problem: general home light fixtures are too static and have intrinsic design limitations. These include lack of control over brightness, direction, placement of light, etc
• Answer: Smartbunch is portable, customizable, can be used in all the same ways a lightbulb can
• converts 220v/120v to safe, ouput 12v direct, 1.4 watts per bulb
• 101mm long on each side, fits average palm size, rounded edges so no risk of injury

Why it applies to you:

• Long lasting
• Flexible lighting options
• because of lightbulb mount, can simply sub for normal lightbulb
• invest in future endeavors

Ordering options:

• Individual Units
• Material type, maybe order in groups of 5?
• Starter: 

Plans for the future: 

• Camera
• Smart Hub (interactivity with app)
• Screen
• Speaker

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