Week 7A

Fall Break - No class

Week 7B

In class today we had the final critique for our websites. This is the feedback that I was given on my website.

• Testimony Section
• The graphics I use to represent the different people that I was quoting were too rough and simple. I could have used actual stock photos of people or maybe made my icons a little more detailed with more than just two colors.
• Peak and Flow Logo
• Rob thought that the logo at the top of the website was too bright and hard to read. Maybe I could have had more contrast between the logo and the background because they were similar in color. 
• Activewear Images
• I could have incorporated some sort of design into the edge of the box that I put the photos in. Maybe I could have used the Peak and Flow logo to break the edge of the images. 
• Footer
• Instead of just using trees in the footer I could have added people running along with the trees. The trees felt slightly Christmasy. The tree part of the footer also did not resize properly with the rest of the website. The grass part below the trees would disappear when you resized the website.

Week 6B

In class on Wednesday I worked on the footer for my website. I found a website called Font Awesome that has icons for social media. I am using these icons in the footer of my page. I also made the icons clickable with links to the different social media sites and I made them have a rollover color change. This is what the icons look like and what the code for them looks like.

Css Code

Html Code

Icons

Week 6 Out of Class

This week outside of class our homework was to show some progress from the critique. Instead of starting a new area of my website I decided to just adjust the different parts of my website that people had given me feedback on. I got rid of the circle that I had behind the earth icon and changed the rest of the icons to be the same shade of blue as the earth. In the background of the header and feature area I put an image of a forest. In order to get the image to go behind both the header and the feature area I put the image in its own little container in the CSS code. Then in the HTML I put the divs for the feature and header bands and columns inside the background image container div. By doing this I was able to get the image to go behind both separate bands. I also changed all of the image type on my website to selectable type. I changed the type below the icons in the about section and the type below the product photos. In order to get the type to go on top of the product images I used W3 Schools to figure out the code. I put the image and the text into a container that went inside the column. Then inside that container I put the text into its little box.

Header with background image 

Updated Icons

Updated products

Header/Feature Area Code

Product Area Code

Week 6A

This Monday in class we had the 50% critique. I received some great feedback from Professor Panafino and the rest of the class. Some of these suggestions included that I should maybe add a background image in the feature are to sort of show where the girl is running. It was also suggested that I could add a texture or pattern instead of just a solid color. It was suggested that I get rid of the circle that I had behind the earth icon because the two circles seemed repetitive. Below the photo of the products I had the price and the word "colors" and it was suggested that I get rid of both. Since you're not able to purchase the clothing from my website it is misleading to include the price. The word "color" was unnecessary because right below it I showed what the colors were. This was some of the feedback that I got in class.

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.