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