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

Week 3B

In Class

Since, we missed the previous class. Our week 3B class had to move quickly by throwing a lot of different information out to the class. We mostly focused on the different way you could add media queries and CSS code to create responsive and fluid webpages.  

In the first example we simply added the embedded CSS script into our HTML page so you could clearly see what was being done without having to switch from page to page. The way we created a fluid image was by setting the max-width to 100%. By doing this the image scales to the proportion of the viewpoint. 

In the second example we added a media query. You can see where we added a comment to help distinguish between the CSS and the @media query. By doing this we can also keep a fluid image because we are setting the max-width of the screen as 480px. So the image stays relative and centered in the browser.

In the third example our goal was to have one image at the size of tablet and desktop but switch the image to screen 2 once it is in the viewpoint less than 480px. This was accomplished by another media query. By having a media query we can help decide at what pixel we want the image to switch or become hidden.

In the fourth example our goal was to switch the color of the screen in each viewpoint of desktop, tablet and mobile. In order for this to work we needed to have a media query for the range of pixels for each dimension of desktop, tablet and mobile.

Class Exercise

At the end of class we went over what important information would be displayed on our home page and sub-page. Luckily, I have a lot of content to work from on my Slam'n Salm'n Derby Website. On my homepage I'm going to make sure I have the overall purpose of the Derby, the date, time and location, direction (Google maps), event information and contact information. On my sub-page I decided to go with the Rule and Regulations page because it had the most useful content for people signing up for the derby. If I do a third page I would make it the about us and go more in depth about the Slam'n Salm'n Derby. I would make sure it had the history of the derby, sponsors and more about the benefits that are gained from the derby.

Week 3A

Class was Cancelled

Week 2- Outside of Class

Homework

Research (Phone Call)

For my phone call to Slam'n Salm'n Derby I needed to call Anchorage, Alaska. This meant that I needed to find an appropriate time to call since there was a 4 hour time difference. If it was 5:30 pm in Pennsylvania that would mean it would be 1:30 pm in Anchorage, AK. I prompted myself by saying "Hello, I'm a student at Millersville University in Lancaster, Pennsylvania and I'm a Graphic Designer looking to find out some research for my class. If you have the time would you answer some question about the Slam'n Salm'n Derby website for me?" Of course the lady I spoke to on the phone was very nice and was willing to speak to me just as long as I didn't have that many questions.

My first question was "What exactly is the Slamin Salmon Derby about? She said it's a unique urban fishing contest that happens once a year for several years now to help fundraise for the local soup kitchen. I also asked information about how much does it cost and how many participate in the Derby. She answered saying that there is no ticket cost to participate in the derby and that you just need to catch as much fish to help out the soup kitchen and there are prizes given out at the end. She also said that there are 1,200- 1,500 participate in the derby. I was surprised by this number. My second main question was "What is the main reason for the website?". She basically explain that the website is used for the basic information about the event and broadcast the event so more people can see it and if you couldn't find what you needed on the website that they rather have you call personally. I truly felt that the website holds a lot of information about the derby and it's fairly easy to find them by search this event on google. The lady was thrilled by how far up the website is on Google when you search it. My third question was "Who mostly uses your website and why?" She responded by saying the people who aren't locals because most of the locals already participate in the derby. She also said that about 80-90 people view their website each day and they get about 600 plus views per month. For a small website I was impressed by this number. My next question was "How many people are responsible for updating the information?" She said that the same 1 person update the information every year and when they get older they hand it off to someone else so not to many people are making changes to the site. My fourth question was "Do you think people would benefit if your website was mobile friendly? The lady was thrilled when I asked this question because she said they are currently working on a leaderboard to try and create a mobile friendly version of the event for next year. The leaderboard will also help the publishers of the website to make updates and changes to the event. As for my last question I asked "if you could change or add anything, what would it be?" She said that having the website be mobile would help a lot because most people are starting to use their phones to pull up information rather than go to their computers. 

The phone call only took 7 minutes because I wanted to keep it short since she said the weather was getting bad and she didn't want to be at the office much longer. But something ironic and interesting that came from our conversation was that her husband had actually graduated from Shippensburg University in PA and they had moved to Alaska about 10 years ago. Overall I thought our phone call was successful and I found out a lot of useful information.

Design Objectives 

From the phone call that I had with the headquarters of the Slam’n Salm’n Derby I wanted to create a responsive website that everyday people can easily understand. Since the population in Alaska is far less than what it is on the mainland of the United States, you would think less people have cells phones. Well Anchorage may only have 290,000 plus people they still use their cell phones to receive information. I want to try and create a website that corresponds to the locals and people interested in the event. I want to spark a felt-hearted emotion to the people who participate in this event because they are doing something to help the community. By sparking this emotion and allowing the people to feel like they are doing something inspiring and moving to the community the website should be warm and inviting. My site should have inspiration quotes and comments about the event, as more people will feel the site is more personal and heart-felt.

As Alaska isn’t the most tech savvy State I want the users to see a clean and easy navigational website because they may not understand all the new kinds of trends that are happening in technology. My dad is someone that would be interested in this kind of event since he loves to fish but on the other hand he hasn’t updated his iPhone 4 since the first version came out and doesn’t even understand the concept of user navigation. This is an example of the type of users that could be viewing the Slam’n Salm’n website. The content must be easily located and spaced out using white space to create breathing room to understand the content.

The physical appearance of the website should be eye-catching so more people want to join in on the fun. As for colors it makes sense to stay in the greens and blues because of the ocean and fishing purpose but I believe corals, pinks and yellows can have a statement on my design since the contestants are fishing for Salmon. My site must stay gender neutral since both guys and girls will be viewing the website.

As for the typography I must stay away from cursive calligraphy typography since it becomes difficult to read in some contexts. Unless the stylized typeface is fancy and legible then I will reconsider. I want my choice of typography to be crisp just like the crystal clear waters. Alaskan is known for it’s beautiful culture, atmosphere and landscapes. In order to illustrate this to viewers who haven’t traveled to Alaska but might enjoy participating in the event I want to choose awe-inspiring photographs that bring people in. Overall I want a crisp, colorful website that keeps the viewer interested or they will become bored.

For the responsive design I want to keep a cohesive design to the webpages seem similar and easily recognizable. To much going on will confuse the user and push them away.  My audience is potentially different compared to the rest of the class but it’s a challenge I’m willing to accomplish. 

Persona 

Reading Chapter 2

Flexible Grid

In this chapter it talks about how typographic grids are a rational system of columns and rows, where content can be placed. The proportions of the web page size is unknown because the canvas of our browser window can bend and flex in any shape or size. Each browser has some type of simple grid to identify. You can look at this .psd document of the website if you received the original file but that will do you no good, unless your using it as a reference. PSD documents are only good if you need the correct pixels but its not necessary when you are trying to create a responsive website. This chapter starts to explain a basic grid webpage and you need to think proportionally. We must express font-size, layouts, and images all in values of relative proportion. So instead of using pixels we will be using em's. Accuracy is key. When creating the perfect font size you should not round up but keep the math to the decimal that is get resulted when you divide to numbers. The page were looking at is broken into 12 columns measuring to 69 pixels across from each column. This would be the basic view. The next view would be that the page is broken into two columns the first being 566 pixels and the second smaller column being 331 pixels. When expressing these widths in relative proportion you can resize the webpage and the column will change with any viewport size. For example you would divide the target width of the browser by the context size and produce your percentage that will change your information based on the viewport size. 

This reading was challenging to understand the first time to I made sure that I read it twice. I'm still a little confused about the em when you are making font sizes relative but the columns and content area math makes more sense after I re-read the chapter. 

Week 2B

Day of Design

12:10 Lara McCormick

The first speaker I listened to was Lara McCormick. She is an experienced designer who has an obsession with hand lettering. Lara's whole interests and research was about the idea of playing with type. She took the idea of balancing work and play and wrote a book called Play with Type. In her lifetime Lara has overlapped her work and play together to create her love affair for typography. In her lecture she talked about her role model Jessica Hische. Jessica is very well known designer for her lettering and illustrations. Lara McCormick also talked about how to get inspired. As young eager designers we should go to workshops, classes, and practice our typography skills because thats the only way we can improve ourselves. Young designers can also use the simple tools and techniques to practice their typography and lettering. One of the first things is to know your terminology because if you can't define the letters correctly then you won't know how to change them correctly. The next step is to find existing type, different types of papers, pens, pencils and writing tools.

I personally felt inspired after her lecture because I have always had an interest in hand lettering but never thought I was very good at it. Lara McCormick may not be the best of the best but she practices every chance she gets so she can improve herself and her designs. About 4 years ago, I also went to a calligraphy workshop in Philadelphia and I thought it was very interesting how they taught us how to use different tools, just like the way Lara explained she does when she is first starting out.


3:10 Tobias Treppman

Our second speaker was from Germany and luckily filled in for Patrick McNeil at the last minute. Tobias started drawing and sketching from inspiration at an early age. From books and resources he taught himself html and css. Without any true formal training he still managed to work for small graphic jobs and now works for a company called Spreadshirt. Spreadshirt company is a creative way to interactive and design your clothes online. Tobias is now focusing on how to make his company responsive because most people are now using their mobile devices rather than computers because its more effective. Although Tobias is struggling to create an accurate responsive page because the amount of control when designing a t-shirt on your mobile device is much harder because your limited to only a few options on the phone instead of on your computer.

I took a lot from this lecture because Tobias explained that you don't need to have a formal training to be successful you just have to be motivated to learn. If you constantly read, practice and learn your career path is endless. It's important to stay up to date with trends and current UX design process.


In Class

In class we went over which projects we were going to do. I was down to two options. Both of the websites were poorly designed and weren't responsive but they both contained a lot of content, that I could work off of. I could of picked the Cupcake Challenge but I thought I could pull more inspiration quotes and content from the Slam'n Salm'n Derby.

The Slam'n Salm'n Derby is a salmon fishing contest in Alaska and anyone can sign-up and join to help catch fish and donate their findings to the locate soup kitchen. Not only is this event creative and original it is also inspiring which will allow me to have more fun with this website.