Week 14b

  Today in class we had lots of time to work on our web project, and I got quite a bit done. With the help of Professor Pannafino I managed to get the triangles for the header to appear on top of the main image. This helped to break up the hard edge of the image compared to the dark sides. I changed my pig picture so the the corner is cut off to match the angles in my logo, and I added a triangle to the top corner to tie in with the triangles in the header. Then I made an illustration of the color spike to place next to the details about it. I'm still not crazy about and I'm not sure why. My next step for it might be to make it totally flat and see if that helps. After that I made up the image for the app part of the product. The images for the app were sadly smaller then I wanted, so I made a triangle pattern to fill the space behind them.  This might require a little more tweaking to perfect. Another large change I made was to add a subtle triangle pattern behind content area two because I felt that, that area was looking a little boring. Finally Im continuing to play around with text size and line spacing.

Week 13 out of class

Thanksgiving break, see Week 14a

week 14a

  Today in class we had lots of work time, and we each met with Professor Pannafino to look at our progress. Over break I had finished laying out the webpage and begun to style it with my colors and typefaces. In class today I started to add images, colors and shapes to my site. I had to edit the images first to make them colorful and look like they used the product. Then I had to play around with my typeface to separate content better and to add line spacing to increase legibility. I also had to change the typeface for my logo because it looked to close to the body typeface, and therefore looked bad. I ended up just changing it to the same typeface as the body. I also started to make a triangle overlay to break up the harsh edges of the pictures on the website.

week 13a

Today in class we had lots of time to start coding our site and creating the rough layout in HTML and CSS. To do this I would draw out a section in pen and then think of all the exact measurements for areas based on those drawings. Doing the Drawing first made writing the code a lot easier since I didn't have to think about measurements, I could just plug in what I already figured out. I would go back and forth, drawing part and then coding it. Breaking it up like this helped make each part feel manageable. I used bright colors for now on the webpage so that I can clearly see where all of my divs are.

Here is the drawn version:

Here is the webpage:

Here is the HTML:

Here is the CSS:

week 12b

Today in class we went over what a style tile was. A style tile is a way to communicate your vision to a client that is a little more detailed than a mood board but not a full mock up. The style tile shows several design treatments so that someone can visualize what they may look like on multiple web pages. After we were introduced to style tiles we had the rest of class time to complete our first one. For my website I’m going with lots of flat design elements because I think this will help all of the images really pop out. The images need to stand out because photographers will be coming to the site and deciding whether or not they want the product. I changed the Colorspike logo a little bit as well. I thought adding the three bars of color beside it served to represent the product itself and add color to the logo. Since the product is all about creating color the logo needs to suggest this too. I’m sticking with open sans as my main typeface because of its simplicity. It doesn't stand out and therefore won't distract from the images. Also it is a very modern typeface and matches the sleek feeling I want for the site. I’m using a few bright colors on the site because I really want these colors to pop and feel like lights. That is also why I’m using a dark background. The content will be in bright colors on a dark background and hopefully this will create a light illusion.

week 12 out of class

   This week out of class I had to write up the content for my website.Thankfully I had already done a lot of this when I did my research so most of it was bringing it over from there. For the content I tried to condense what they had on the Kickstarter and also have it sell the product more. Their writing was very matter a fact so I added a bit more excitement to mine. I also added some writing to describe the picture I wanted for the site.

Heres my content:

Only info in “” will be on the page

Section one (above the fold)

A large photo that is a really good example of what someone could produce with the product. The photo is in the background but it's still clearly visible. It’d be cool if it cycled through several examples.

Over the top of the image in the center

“Color Spike”

Underneath

“ Lighting for photographers by photographers”

Underneath much smaller

“Color spike is a lighting system for video or photo use that is easy to use and setup. The team that dreamt up color spike came up with the idea after realising the need for it in their own photography. As photographers they understand what people need and have come up with a product that uniquely fills those needs. “

Section 2

On the left side a photo example about two thirds of the page

Beside it taking up the remaining space.

“Photo use:

Color spike isn’t only for video use. It can also easily be setup to create stunning mood and lighting effects in your photo shoots. Whether in a studio or on location Color Spike can be quickly set up and adjusted to fill your photography lighting needs. Color Spike’s portability and easy app control will help cut down on set up and allow you maximize your shoot time. “

BELOW

Aligned on the right size a GIF from a film example that is the same size as the photo example above.

Beside it taking up the remaining space “ Video Use:

Color Spike can be used to simulate all sorts of practical lighting effects in film. From camera flashes to fires, by dialing in the settings you can choose from a multitude of color options and make the light pulse or strobe to create the effect you want. The light is also bright enough to be clearly visible in the footage, or if you want you can dial it down for a more subtle tone. Color spike can also easily be setup to create fantastic mood lighting.

Below these going across the entire page will be the details of the hardware of the product. I’m thinking a list for these so that people can scan through it quickly.

“Color Spike features:

1. Rugged yet breathable anodized aluminum body
2. Dual side channels for easy mounting
3. Sized for easy handheld use
4. Flicker free LEDs capable of millions of colors
5. DC adapter
6. Internal battery (about 45 minutes of continuous light)
7. On board UI
8. Diffusion screen “

Section 3

Here there will be a large image that has the screen caps of the app, If I can i’ll use the one from the kickstarter because i’m not sure how i’ll recreate these. The picture will span the entire page.

Below the images of the app will be text about the app

“App Controlled:

Use the free color spike app to quickly and easily set up patterns and colors for you Color Spike. Just pair your phone with one or more Color Spikes and used the intuitive mobile interface to easily program your lights. Colors can be changed with the color wheel and strobe patterns setup by changing the waveform. The app is already finished and fully functional so there will be no delay on having it ready by the end of the kickstarter campaign.  “

Section 4

“About Us”

Here there will be an image of the creators from the kickstarter. The image will be aligned left but placed in the paragraph so that it resembles an initial caps.

Content about the makers

“Duncan and Steve have been friends for over twenty years and started Bitbanger Labs in 2012 to fulfill niche demands in technology. Being photographers they realized the need for specialized technology in the field, and started making the products that they would want.  In 2013 they designed the Pixelstick, a light wand that revolutionized painting in photography. Now they’re back to shake things up again with Color Spike. but they need you help to make it happen, check out the kickstarter”

BItbanger labs will be a link and kickstarter will be a link.

BELOW

Centered Here there will a form to send a message

Top field “Name”

Middlefield “Email”

Bottom field “Message...”

BELOW

“Interested? Check out the kickstarter”

Large link button to the kickstarter.

Also outside of class this week I finished my second style tile. For this one I darkened everything up and I'm very happy with the result. The darker background makes everything else pop more and helps the "light" effect that I wanted. I also added a picture to this style tile to get a feeling for what images would look like on it. I change my type face from Open Sans to Roboto and I think I prefer Roboto because it forms denser paragraphs. Finally my decorations for this style tile moved away from the loose fun ones of the last tile, to being a bit more orderly and I think this is an improvement.

Week 12a

Today in class we started off with a review of what wireframes are and aren’t. They are general plans and they aren’t fully detailed with designs. Then we broke into groups and made wireframes with our teammates. I was with Keshaun and Yemei and we each made two wireframes. The content for my site (ranked in order of importance) was the showcase, about the product, App Control, About the creators, Contact, and sell/kickstarter. I have sell/kickstarter listed last here but we decided on the second wireframe to have the link at multiple places on the page so that it wasn’t lost if people were jumping around. Since my product is for photographers we decided to leave lots of large spaces for images. These examples will help inspire people to try the product, and therefore buy it. We’ve also left places for video examples, but this might be beyond my capabilities for the project. The large photos have left a lot of the webpage looking like a single column, but don’t think that this will be a bad thing. There won't be tons of written information on the page so it’ll be good to space it out. For both of the wireframes we decided to have the area above the fold be a large example of the product in use. This large and hopefully beautiful image or film example will help to draw people into the site. Then both wireframes go into showcase examples paired with text about the product. I think I’m going to go with the first wre frame because I’m worried that the second one relies to much on video and has too many examples before it gets to talking about the product.

1

2

Week 11b

Today in class we had in class work time to gather research on our Kickstarter campaign and the subject it's a part of. We also had some time to start the HTML PDFs. Here is my research so far:

From the kickstarter:

What is it?

Color spike is a lighting system for video or photo use that is easy to use and setup. The team that dreamt up color spike came up with the idea after realising the need for it in their own photography. As photographers they understand what people need and have come up with a product that uniquely fills those needs.

Features:

1. Able to dial in tons of interesting effects
2. Great for both video and stills, in-studio and on-location
3. App-controlled
4. Linkable to create multi point lighting system
5. Bright enough to be useful  

(copied from the web page)

What I’m imaging the Content being about:

I’m imaging these three subjects bellow being on a slide show feature area near the top of the page. Maybe an image example on the side with the content text beside it. OR it can be an image with the heading and when you click on it, it links you to the content text lower on the page.

Video use:

Color Spike can be used to simulate all sorts of practical lighting effects in film. From camera flashes to fires, by dialing in the settings you can choose from a multitude of color options and make the light pulse or strobe to create the effect you want. The light is also bright enough to be clearly visible in the footage, or if you want you can dial it down for a more subtle tone. Color spike can also easily be setup to create fantastic mood lighting.

Photo use:

Color spike isn’t only for video use. It can also easily be setup to create stunning mood and lighting effects in your photo shoots. Whether in a studio or on location Color Spike can be quickly set up and adjusted to fill your photography lighting needs. Color Spike’s portability and easy app control will help cut down on set up and allow you maximize your shoot time.

App Control:

Use the free color spike app to quickly and easily set up patterns and colors for you Color Spike.

Other Content items:

-a link to the kickstarter at the top of the page

-The hardware of the product

-About the creators

-Maybe set up info

-Maybe a how to section based off the other info I gathered.

Other Photo Lighting

https://www.bhphotovideo.com/c/buy/LED-Light-Sources/ci/12248/N/3988592074

B&H:

-Most other LED lights are large panels and look hard to transport

-Most of these mention the LED count

-Doesn’t mention app control or how you dial in settings

-Can be daisy chained together (I’m pretty sure color spike daisy chains)

-A lot of these come with stands

Popular Photography

https://www.popphoto.com/gallery/top-10-photography-lighting-facts-you-should-know

10 lighting facts that will improve your photography

1. To create softer lighting effects use a broad light source. If a light source is wide it hits the subject from more angles causing less harsh shadows.
2. Use distance to create softer effects. If a light source is closer than it illuminates the subject more creating less shadows. If it is distant it’s becomes narrow and casts more shadows.
3. Covering a light source with a thin material creates softer light. When the light passes through the material it scatters it in many directions. This is called Diffusion.
4. Pointing a light at a wall and then “bouncing” it back to the subject can simulate diffusion.
5. Distant from the light source to the subject affects how light “falls off” the subject. I think falls off means how quickly shadows form on the unlit areas. Sort of like Tenebrism.
6. The fall off can be used to make a subject blend into the background or stand out. If a light is further away from the subject then the background will appear to be brighter.
7. Light from the front will hide texture, while light from the side will make it stand out
8. Use shadows to emphasize the volume of an object.
9. Lighting from behind can act as diffuse lighting. The light will bounce of the opposite wall back towards your subject.
10. All light has a color. Sometimes our eyes can’t register that color, but the digital sensors can. Therefore you must be prepared to color correct.

FStoppers

https://fstoppers.com/studio/how-read-light-photography-part-1-2544

Not super helpful for content but might help me in recreating pictures for the website. This article tells you how to figure out what lighting effects a photographer used when creating a picture. It goes over basics like direct and diffuse light sources, and it also has a guide to help you look at eye reflections to and determine lights.

Week 11a

   Today in class we talked about how to set up a grid system in CSS. This was super helpful for me because I attempted to do something like a grid system in my last page but it failed horribly and couldn't scale. The key command that I didn't know to do was the "float" command which allows div classes to go beside each other. After the lecture we were introduced to the last project. For the project we need to make a single web page for a Kickstarter campaign of our choosing. After the introduction we were let of to kick starter to start browsing campaigns. Here are some of the ones I looked at that I thought were worth considering:

-YOUnicorn: a book to help you discover your inner unicorn
-Rocket Science: a children's book that explains the fundamentals of space travel.
-Odd dog: an animated short about a cat that thinks its a dog.
-Root: a game of woodland might and right.
-Aurora: a practical effects retro time travel creature feature
-Advanced Death Saves: a comics anthology about player's table top RPG character's deaths
-Color Spike: a Portable LED for Film and Photo use.

   The projects that I'm currently thinking about doing the webpage for are Root, Rocket Science, and Color Spike, but really any from the list above would be good for me.

Week 11 out of class

KickStater websites

1. Roots: a game of woodland might and right, is a board game with a Robin Hood like twist to it. In a land of Forest creatures the evil Marque de cat has seized control of the woods and is attempting to harvest its resources. Players can control four factions that are vying for control of the woods, The Marque, The Eyrie, The Alliance, and The Vagabond. The game is strategy board game in the likes of Axis and Allies or the Game of Thrones board game, where you manage resources and try to take territories. I think the Game has great art style and I would definitely be interested in playing it.  I’m a bit worried that it might have to much of an established style for the project though.

Link: https://www.kickstarter.com/projects/2074786394/root-a-game-of-woodland-might-and-right?ref=discovery

2. Rocket Science is a children's book that explains the fundamentals of space travel.  I personally am very excited about space travel and I think it would be helpful if more people knew about it. If people understood it then they might be more willing to fund it, and I think a book like this could go a long way in raising interest. The book has illustrations, but not a super strong brand elsewhere so there would definitely be room to play with the website. They have a blueprint theme running through some of their illustrations and I can imaging that would be a fun way to organize content on the webpage.

Link: https://www.kickstarter.com/projects/1734237858/rocket-science?ref=discovery

3. Color Spike is a company that wants to make easy to use LED light strips for film and photography use. The products are mountable boxes about the size of a traditional industrial fluorescent bulb with a single row of LEDs in the center. The lights can be used to create mood in photography or as direct props themselves. What makes these stand out is that you don’t need to hand dial in the colors yourself. Instead there is an app that allows you to choose your color like you would in an Adobe program. While I don't really care about the product itself I can see a lot of fun possibilities in what the web page could look like. Since the product focuses on light and color that could leave a lot of room for fun color combinations and strong darks and lights. Link:https://www.kickstarter.com/projects/bitbangerlabs/colorspike-create-in-color?ref=discovery


  Additionally out side of class this week I read chapter 5 in Above the Fold, completed the PDFs, and did some more research. Here are the screen shots for my completed code and websites for the PDFs.

HTML:


CSS:


  For the rest of my research I focused on what content I would want on the site. I read through the kick starter and converted their sections in to content areas. I reworded a lot of what they said in a way to make it more appealing. Their writing was very matter a fact so I spiced it up a bit and cut it down to the essentials.

Here's my research so far:

What is it?

Color spike is a lighting system for video or photo use that is easy to use and setup. The team that dreamt up color spike came up with the idea after realising the need for it in their own photography. As photographers they understand what people need and have come up with a product that uniquely fills those needs.

Features:

1. Able to dial in tons of interesting effects
2. Great for both video and stills, in-studio and on-location
3. App-controlled
4. Linkable to create multi point lighting system
5. Bright enough to be useful  

(copied from the web page)

What I’m imaging the Content being about:

I’m imaging these three subjects bellow being on a slide show feature area near the top of the page. Maybe an image example on the side with the content text beside it. OR it can be an image with the heading and when you click on it, it links you to the content text lower on the page.

Video use:

Color Spike can be used to simulate all sorts of practical lighting effects in film. From camera flashes to fires, by dialing in the settings you can choose from a multitude of color options and make the light pulse or strobe to create the effect you want. The light is also bright enough to be clearly visible in the footage, or if you want you can dial it down for a more subtle tone. Color spike can also easily be setup to create fantastic mood lighting.

Photo use:

Color spike isn’t only for video use. It can also easily be setup to create stunning mood and lighting effects in your photo shoots. Whether in a studio or on location Color Spike can be quickly set up and adjusted to fill your photography lighting needs. Color Spike’s portability and easy app control will help cut down on set up and allow you maximize your shoot time.

App Control:

Use the free color spike app to quickly and easily set up patterns and colors for you Color Spike. Just pair your phone with one or more Color Spikes and used the intuitive mobile interface to easily program your lights. Colors can be changed with the color wheel and strobe patterns setup by changing the waveform. The app is already finished and fully functional so there will be no delay on having it ready by the end of the kickstarter campaign.  

Other Content items:

-a link to the kickstarter at the top of the page

-The hardware of the product

1. Rugged yet breathable anodized aluminum body
2. Dual side channels for easy mounting
3. Sized for handheld use
4. Flicker free LED capable of millions of colors
5. DC adapter
6. Internal battery (about 45 minutes of continuous light)
7. On board UI
8. Diffusion screen

-lots of photo examples

-maybe a pho professional shoot like the one they have.

-About the creators

Duncan and Steve have been friends for over twenty years and started Bitbanger Labs in 2012 to fulfill niche demands in technology. Being photographers they realized the need for specialized technology in the field, and started making the products that they would want.  In 2013 they designed the Pixelstick, a light wand that revolutionized painting in photography. Now they’re back to shake things up again with Color Spike, but they need you help to make it happen, check out the kickstarter Link.

-Maybe set up info

I’m thinking like an illustrated diagram here

-Maybe a how to section based off the other info I gathered.

Other Photo Lighting

https://www.bhphotovideo.com/c/buy/LED-Light-Sources/ci/12248/N/3988592074

B&H:

-Most other LED lights are large panels and look hard to transport

-Most of these mention the LED count

-Doesn’t mention app control or how you dial in settings

-Can be daisy chained together (I’m pretty sure color spike daisy chains)

-A lot of these come with stands

Price: The color spike seems to be on the more expensive end so I wont want to emphasis price

Popular Photography

https://www.popphoto.com/gallery/top-10-photography-lighting-facts-you-should-know

10 lighting facts that will improve your photography

1. To create softer lighting effects use a broad light source. If a light source is wide it hits the subject from more angles causing less harsh shadows.
2. Use distance to create softer effects. If a light source is closer than it illuminates the subject more creating less shadows. If it is distant it’s becomes narrow and casts more shadows.
3. Covering a light source with a thin material creates softer light. When the light passes through the material it scatters it in many directions. This is called Diffusion.
4. Pointing a light at a wall and then “bouncing” it back to the subject can simulate diffusion.
5. Distant from the light source to the subject affects how light “falls off” the subject. I think falls off means how quickly shadows form on the unlit areas. Sort of like Tenebrism.
6. The fall off can be used to make a subject blend into the background or stand out. If a light is further away from the subject then the background will appear to be brighter.
7. Light from the front will hide texture, while light from the side will make it stand out
8. Use shadows to emphasize the volume of an object.
9. Lighting from behind can act as diffuse lighting. The light will bounce of the opposite wall back towards your subject.
10. All light has a color. Sometimes our eyes can’t register that color, but the digital sensors can. Therefore you must be prepared to color correct.

FStoppers

https://fstoppers.com/studio/how-read-light-photography-part-1-2544

Not super helpful for content but might help me in recreating pictures for the website. This article tells you how to figure out what lighting effects a photographer used when creating a picture. It goes over basics like direct and diffuse light sources, and it also has a guide to help you look at eye reflections to and determine lights.