Week 6B

REFOCUSED IDEA:

In class I realized I wasn't happy with my designs and I wasn't getting the full fun spectrum of the Derby. I decided to go in a direction to capture the essences of Alaska beauty by incorporating mountains, water, jumping salmon with green and blue colors with a pop of salmon color. I created a flat design background for my logo to pull my strong illustrations that I can create through Illustrator. From my previous designs I kept the salmon but readjusted it's body in Photoshop by using the puppet tool. Below that is the process of creating my mountain atmospheric background. 

Creating the logo was probably the hardest part. Trying to figure out the most appropriate typeface and typeface mixture took some time. The styles below were only a few examples of the styles that I went through.

Week 6A

In Class

In class we went over the basic structure of setting up our containers. One of the concepts that I was most confused about was the row clearfix. After our professor explained that row clearfix is it's own sort of grid system in the web page it made more sense. For each clearfix there has to be a row and within each row is divided up by columns. The columns range depending on what content is being placed into the row. 

During the class we went over our designs and I don't feel confident about my design so far and I need to rethink my illustrations. For homework I used the big red concept with large span that goes across the entire webpage. 

Week 5-Outside of Class

Working on the Responsive Elements

Over the weekend I did a lot of reading on different elements and how to make them responsive. Across the board I thought it was fairly easy to find the code for the HTML for everything I needed to do. Although, I couldn't find the code for the CSS stylesheets and that's the code I needed to see if my page was working or not.

I found a lot of issues on the way but tried my best to work around them.

A few successful features I got working was the webkit generator for live text. Different colors on different viewports to see if the page was being responsive in my media queries and the Menu tab showing up in mobile and listing them horizontally in the desktop.

You can see I had some failure with the toggle button. The menu showed up at the bottom of my page and the Menu button is no longer clickable as well as my hover states in my horizontal listed menu bar. 

I also had success keeping my fish image the same size across all viewports as it was my intension. I created this with my media queries.What didn't work in my benefit was the extra tail showing in the mobile view. It took me a while just to get to this point. I think I can figure this feature out through false cropping in css. 

Week 5B

In Class

Reading

Frameworks for Web Design

A framework is a standardized set of concepts, practices, and criteria for dealing with a common type of problem. Although in the design aspect a framework is defined as a package made up of a structure of files and folders of standardized code. Some of theses code languages are html, css and javascript document. Theses languages are used to support the development of websites as a starting guide to create your website. The goal of a framework is to provide a common structure so developers don't have to start from scratch and are able to reuse the code provided. No need to reinvent the wheel.

There are two different frameworks. The first being the back-end and the second being the front-end or better known as the presentation layer. The front-end is a user interface and the common languages used for the front-end are HTML, CSS and Javascript. Frameworks that are commonly used for front-end interfaces are Bootstrap, Foundation 3, Grid Systems, etc. The back-end is the logic and operation of the website. The languages that are used in the back-end are PHP, PYTHON, RUBY, JAVA etc. and they use frameworks such as Symfony, Django, Ruby On Rails etc. The concept of a framework can be applied to different processes carried out on the web. This is a way the programmer can connect with the database of the sites content and ultimately have it viewed on a browser.

There are several frameworks you can select and use as inspiration. In the article it lists over 10 simple frameworks like Responsive Grid System, Titan and the Golden Grid system. It also lists more complex frameworks like skeleton, foundation 3, and bootstrap.

Class Exercise

During class we were prompted to create a basic responsive page structure. In small groups we worked together to write down the code. We copied everything we were told to into our html and css page but unfortunately once we got to step 9 it didn't turn out the way we wanted to. We added our own content to the webpage and everything moves as what we think is responsive but were not quite sure. In step 9 we were suppose to create columns using row clear fix but it became fairly confusing and didn't work out.

After we email our professor with questions about how to create the columns we noticed he made a lot of changes in the css section. This still was not clear to me because I wasn't sure where he got the percentages or how the columns started to become responsive.

Week 5A

Professor was absent

Final Postcard:

Over the weekend we designed postcards that will be showcased on our websites. From talking with several people they all enjoyed this one the most. It caught the audience eye more than the other two. This design is gender neutral since both women and men will be participating in the Derby. From the people I talked to, they believed this post card had a lot of clean elements even though there is a lot going on. Some elements I changed was taking out the second "Derby" word in "The 2015 Derby" and the second element I changed was the font face for the body copy. 

Typecast Update:

Due to this change I will be now using Georgia as my body copy! This is a much cleaner typeface and the kerning is spaced out appropriately. Georgia also looks similar to my tall, skinny heading typeface called Abraham Lincoln. 

Illustrations for Webpage

From my sketches I don't have that many illustrator elements. I may find that I need some extra ones later down the road but I haven't decided. I think it depends when the content is actually layout on screen in order to see if more illustrations or photographs will be needed. As of right now here are the illustrations that will be incorporated onto my website.

Week 4- Outside of Class

Homework

Design Progress for Postcards

For my branding process I decided to create an Illustrator file of a salmon to be place at the top of my website. I tried to stick with the color scheme. The final version of the salmon I designed was the one on the right. 

Here are my two postcard for the Slamin Salmon derby. I have three directions for each postcard. For the first one it reminds me of a camouflage look. This would appeal to the male audience. As for the second one it is more of a women soft design. There are several different types of salmon but I chose the Sockeye Salmon because it has such a rich salmon color that really catches the eye. The third design is a more minimal but effective white space design. All of theses are very different. Personally, I appeal to the bottom postcard card but there is something really strong and moving about the first one. The first postcard shows a large school of fish to give the impress that there will be a lot of fish to catch. The third one is very simple and clean. The large text on the third one relates to how I want my final website to turn out. 

---

Typecast Guide

As for choosing my fonts I already had in mind that I was going to use (Abraham Lincoln) as my H1 heading. Unfortunately, typecast didn't have this font on it's program. Instead I just took the standard layout of typecast and made my own version. I used typecast case merely as an inspiration. For the smaller headings and body copy I used Athelas. I want to keep the Slab Serif throughout my design. Although, I'm going to stay open minded to my smaller and body copy since I'm not 100% set on that typeface. 

---

Marking Divs (with Tracing Paper)

With a new color for each div. we were suppose to draw boxes that showed where each div would be place on our webpage sketches. For each box it receives one color but gets drawn across all three responsive layouts.

Home Page

Rules Page

Week 4B

In Class

In our critiques we talked about our visual style boards and how we could improve them and what is working well. Overall my classmates thought my color scheme was working well I just needed to fix it on my style board so it would be displayed on the side. They thought the salmon color helped give the blues and grays a pop color but it wasn't too girly. After looking on my style board the image with all the boats was thought to be a good background image to give an overall sense of what the derby may look like. On top of the image they believed I should have an illustrator image of the salmon as my branding component. This illustrator file would also be displayed on all the pages and be cropped down as you moved through the responsive view-points. Other elements my group thought was working was the Abraham Lincoln typeface. It was strong and would appeal the male audience.

As for elements that I need to change or rethink my group thought I need to show off my images more. Before I wanted to display my images in the buoys but after some thought it would mean that I would have a bunch of buoys all over my page and start to look clustered and too busy. The buoy idea will just be used as a decoration. Instead I will incorporate an image gallery to display all the images about catching fish, the derby, preparing the fish, and the soup kitchen.

Here is my updated version of the Visual Style Board.