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. 

Week 4A

In class:

During class we had a critique about our sketches for our new webpage. Overall the class leaned to the designs that reflected responsive design pattern and white space. They thought I should combine these aspects to create my final version for homework. Some elements that stood out was the fixed hook aspect that would move with the page and the buoy where images could be placed. They also thought that a lot of white content could help my design because the user needs content to be clear.

Homework

For homework I combined some of the aspects that I thought were working the best in the responsive pattern and white space.

Our second portion of homework was to create a visual style board. This reflects both a element collage, moodboard and style tile. I incorporated images, screenshots, typography inspiration, text, icons, colors and elements that you would see on my webpage. 

I tried to reflect rich ocean colors and I'm still not sure what direction I would like my logo to go. 

Week 3- Outside of Class 2

Readings

Fluid Grids- Using ems
http://alistapart.com/article/fluidgrids

This article was very useful because it went of the concepts of using ems in a grid layout. It also easily explain the target / context = result concept. This helped explain how using ems will perfectly proportion the target content to the viewpoint that is being viewed. It also explains that using a grid based system will help place your content/ text correctly throughout the webpage because everything is align to the grid. Grid based systems are important for context heavy webpages.

How to size text using ems
http://clagnut.com/blog/348/

This article helped explain more about em and how to calculate them based on the size of pixel that you are using. An important factor about this article is that it explains that pixels are okay for any other browser. But if you are using Internet Explorer then you must uses ems in order to create a responsive webpage. Internet Explorer isn't up to date like all the other browsers so it doesn't it read pixels the same. This article also talked about other elements that may use ems besides grids, images and text.

Px to Em Converter
http://clagnut.com/blog/348/

This website was basically a reference to do simple conversions from pixels to ems. This would save you time if you didn't want to go through the whole math portion. I would use this because math isn't my strong suit so if I got a number wrong it would mess up the whole thing.

Unstoppable Robot Ninja- Fluid Images
http://unstoppablerobotninja.com/entry/fluid-images

In this article the author basically trashed windows and internet explorer and how bad of a browser it is. He wants users to start using ems because browsers like these make it very hard to the user to make out the images and text because they get so small and fuzzy that you can barely read it. I was very confused by his code because it was nothing like I've seen before. I skimmed this section because I did not understand what he was trying to do in his CSS page.

Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

In this article it goes over the different examples that you may see when it comes to multi-device layout patterns. The most effective way of creating fluid layouts is column based grids that will stack on top of one another to create a fluid page. Another way is called the column drop, the layout stays consistent but the breakpoints change. Personally, I think the off canvas layout gets confusing for users that may not know to switch screens by pressing one button and the layout shifter tends to move the content in strange ways. For example the sidebar will become the top navigation in the mobile view and this seems complicated and unorganized.

Responsive Patterns
http://bradfrost.github.io/this-is-responsive/patterns.html

In the last webpage I looked up was a bunch of different examples that could be used for responsive patterns. It ranges and describes all the different grids, layouts, navigation, images, text, etc. that you could think of. You can simply mimic this by going into to source code and viewing how they created this webpage.

---

Responsive Wireframe Sketch Sheet

White Space

Responsive Pattern

Experimental

Week 3- Outside of Class

High School Visit

Hempfield High School

As one of our assignments for the year we are suppose to attend a High School and either lecture them or present for them. My group consisted of Kelly S, Lauren M, and Kristyn S and myself. We were given the opportunity to give a class lecture on the basics of HTML and CSS to a total of 8 students. Not only did we get to lecture about the definitions of those terms but we got to actually teach them and go over a demonstration. To split up the work I had Kristyn open the class with a disclaimer. We wanted to make sure that we might not get to everything but we were going to try as best as we could. Kristyn also defined what the difference between the Internet and the World Wide Web. Her job was also to define how theses two terms work together. After a few slides Kelly took over and explained what HTML and CSS were and how the browser uses those languages to create a webpage. Lauren went more in depth about the potential jobs that could use this kind of knowledge. We wanted to make the opening lecture brief so we could have enough time to go make our basic webpage. For the rest of the class I took over and presented the demonstration.The rest of the group would walk around and help whoever was struggling with the code.

Throughout the demonstration I had to carefully explain how everything works because a lot of the terms start to overlap and become confusing. We got through most of the demonstration but we didn't finish. Overall, I thought we had a huge success because we got through all of the HTML slides and started to add the CSS information. There was also only a few students that got confused but to the help of Kristyn, Lauren, and Kelly the students got back on track. This was a great opportunity because I enjoy speaking in front of others and teaching. I would definitely do this again if I received the chance to.

Below is the presentation I created