Week 5B

This week in class I worked on getting more of my website done. I had started the "Our Story" section outside of class earlier this week so I refined it in class. I have that section pretty much done. I still need to add actual content to the text sections below each icon. In class I also worked on the footer. Eventually I want to make the social media icons clickable so that they will actually take you to the different social media sites. This weekend I will probably work on getting the product section done.

Footer

Our Story Section

Our Story Section Code

Footer Code

Week 5 Out of Class

On Monday in class this week I had finished up the header and feature area of my website. Yesterday and today, outside of class, I worked on the "Our Story" part of the website. I created three different illustrations to represent the three different sections of "Our Story" which are Who? What? and Why?. I haven't figured out what I'm going to put in the text part of each of these yet. Below is a photo of my progress so far and a close up photo of the graphics that I illustrated.

This weekend outside of class I worked on getting at least 50% of my website completed. I worked on the mens and womens product areas of the website. I used photos from the Peak+Flow kickstarter page and I removed their backgrounds in Photoshop and then brought them into Illustrator and added the grey background and the text below them. 

Product Section 

Html and Css code

Week 5A

Today in class we started to add content to the website layout that we had coded earlier. In class I was able to complete the top of my website including my header and part of the feature area. This week I will be working on the "Our Story" part of the website and maybe starting to work on the product part.

Week 4B

Today in class we started to code our websites. We're starting off by blocking off the various sections of our websites using blocks of color. I started my code off by making 5 different bands that stretch across the whole screen. Inside each of these bands I put a wrapper which is 1200 px wide. This has a dotted outline around it. Then inside the wrapper I am going to put smaller columns to hold all of my text and images. As you can see in the photo below I started making the columns in the very top band. Below are photos of my website and code

Week 4 Out of Class

Style Tile

Outside of class so far this week I worked on finishing up my style tile for my website. I figured out what colors and fonts I want to use. I also created some different graphics like a subscribe button and little social media logos that might go on my page. For my graphic I decided to do a vector illustration of a running woman wearing the Peak+Flow clothing. The illustration is very simple and I may add more detail later. Below is a photo of my finished style tile.

Website Layout 

Outside of class this week I also finished working on coding a basic layout of my website. For the css part of the code I created different bands that stretch the whole way across. These are different colors and represent the different sections of my website. Then I made a wrapper and in the html code I put the wrapper inside each of the color bands. The wrapper is white and is 1200 px wide. All of my content will sit inside this white area. Then inside the wrapper I made different columns to hold all of the separate elements of my content. These columns have a dotted outline. Below are photos of the website and some of the code. 

 

Week 4A

In class today we looked over our rough layout sketches. Then we began to work on style tiles for our websites. I had never heard of style tiles but they are similar to a mood board but more specific and organized. I worked on mine for most of the class and continued to work on it after class. So far I have a rough idea of what kind of colors I want to use. I found some fonts I like as well. Now I need to work on my graphic which is going to be an illustration of a woman running wearing the Peak+Flow clothing.

Week 3B

Today in class we decided which Kickstarter campaign to go with. When I showed Professor Pannafino and the class my three Kickstarters they thought that the Habit System was the best one. They thought it would be a good and challenging subject for my website. However, I decided not to do that one because the company that made the Habit System already has their own website and it is quite a nicely designed website. In the end I decided to go with Peak+Flow. I think it will be a good subject for my website because the clothing has some very nice colors and patterns that I will be able to incorporate into my website. In class today I began to work on my layout sketches and so far I have done one.

Week 3 Out of Class

The second Kickstarter campaign that I think would be good for me to use for my website is the Habit System. The Habit System is a unique planner that is designed to reduce your stress and anxiety, realign your goals and balance your life. What makes it different compared to typical planners is that it's designed to help you form better habits and instead of just being an organized list it is actually a system that will help you figure out what you have time for and what matters most to you. I think it would be a good choice for my website because it is a very well thought out and well executed design. The planner itself is well designed and there are many nice photos of it online. The company that made the Habit System, Code and Quill, does have their own website but as of now the Habit System is not actually on their website so this also makes it a good choice.

The last Kickstarter campaign that would be a good option for my website that I will be designing is Peak+Flow. Peak+Flow is an activewear brand that focuses on creating clothing that is sustainable. Their clothing is made from recycled, organic materials and it is made in ethical factories. I think Peak+Flow would be a good choice for my website because I myself am very into fitness and activewear so it would be a fun kickstarter to make a website for! They are also a very well designed brand and they seem to be very professional. They have a prelaunch sort of website but not an actual one so that also makes them a good choice. They also have a very nice instagram with lots of photos that I would be able to use on my website. 

Outside of class last weekend I also worked on my layout sketches for my website. 

Week 3A

Today in class we learned about applying the modular grid system to our css coding. We also began to figure out which kickstarter project we're going to use for our webpage. The first kickstarter project that I think would be a good choice for my webpage is the Nebos Ultralight, a light and compact sandal. The Nebos Ultralight claims to be the worlds lightest most compact sandal with many different uses from backpacking to traveling to rock climbing. I think these sandals would be a good choice for my webpage because they seem to be a relatively well designed product. There has definitely been some thought put into them and they have already started to establish a brand. They also have some nice photos of their product which I would be able to use on my website. They also do not have their own website yet so that makes it a good option as well. 

Week 2 Out of Class

Today out of class I finished up my vacation website page. I changed the colors and adjusted the fonts  and spacing. Although it is very simple and basic I am satisfied with the way my final webpage turned out! So far I am enjoying coding a lot! Below are photos of the html and css code that I did for my webpage and the finished webpage.

HTML and CSS Code

Finished Vacation Page

Week 2B

In class today we began to learn how to do CSS. We learned about the types of CSS: external, internal and in-line. We learned about the box model and how to use it in our code to add some styling. Below are photos of my CSS code that I worked on in class and the finished website. 

CSS Code

Website

Week 2A

Labor Day, no class.