5a outside of class

Kira designed these genius postcards after our critique last class period. We decided to aim our brand more towards the bus aspect and less towards the beer aspect. It is an event to promote drinking and driving awareness after. She also included a map of Lancaster City as the background which I love. Using my original logo and typeface choices, this is the beginning of our new brand!

Week 5a

For class we had a mini critique in the middle room about our post cards. Kira and I presented ours. The class and Pannafino said they wanted more of the aspect of the bus and the theme of that the beer crawl will have a bus and drivers. The more I thought about it, it made sense. We need to incorporate that aspect to make this event unique.

That took up a good bit of our class. We then spent the rest of the period going over coding and responsive design.

Week 4B Field trips

We spent this day visiting 3 local design firms in Lancaster. Our first stop was Synapse, a predominantly web design based studio located off of Centerville Road. I was initially really impressed with the overall environment of this studio, it was very well designed when we walked in and seemed like an upscale professional atmosphere. Bobby Deraco walked us through the studio, telling us what each room's function. I was impressed by all of the equipment that the designers had access to. As we walked through the room where the developers work, he showed us different projects that people were working on simultaneously. Some people were strictly photoshop based, designing visual graphics for the coders to then generate. Others were working on front-end development, and some people were testing websites that were in the end stages of development. It was not what I was expecting a design firm's web developers to function like. I had expected each person to have their own cubicle space within the office, not all be working side by side in a narrow dark room. I think that the set up had its perks and cons. The perks being that you could easily get help from other designers that would be able to coach you through something you didn't know. The cons would be that you had no privacy, worked all day everyday in a dark narrow room, and for me, it would be intimidating to feel like people were hovering over me all day as I worked. All in all though, I was really impressed with this firm and feel as though I learned a lot about how the web development business world works.

Our next stop was Godfrey, in downtown, Lancaster. This building ended up being very large and provided separate cubicles for each of their employees to work in. I like that aspect of this company. Godfrey was probably my least favorite of the 3 places that we went because I wasn't that crazy with the work environment and they also seemed to not be as strictly professional and upscale as Synapse was. It seemed like a mediocre place to spend the majority of your days. This is just my opinion though, I am very sensitive to the spaces that I am in, so I am really using this as a biased opinion. Other than that though, I was impressed with the presentation that they gave about the business to business world, and also the work that Erin Good has accomplished in her year's time at Godfrey. It seems like they are in a big transitional period into the web world and that she is a main component of that. 

The Infantree was my favorite stop of the day. I really liked the owner's personalities and the chemistry that they had with one another to be co-owners. I also really love their work that they have done. I think that I was drawn to their brainstorming methods where they have their clients pick images that they feel would suit their brand and end up making a huge element collage that gets picked away at until their have a final moldboard. This is very similar to my own creative process because I am also a very visual person. I was also more drawn to the smaller design studio atmosphere. They only had about 6 employees, but everyone seemed to have their own role within the company and they all seemed to be close friends as well as coworkers. I was a little taken aback to learn that they really only had one person that did their web developing. All in all, it was a great and education day that I really feel that I benefitted from. 

Week 4A

Today in class we went over our assigned homework readings in class. We also had a mini class critique where we went over our persona's for our website. My group volunteered to present all of our personas to the class. There were components of each that people liked and others that they thought were irrelevant. We decided that our website was going to be geared towards college students in the Lancaster area and that the main concept behind our event it to raise awareness for drinking/texting and driving. Our website will be very illustration based.

We also went over different web styles in class and walked through the process of making a web page fluid by changing its max-width to 100 percent.

Week 3 Outside of Class

This week outside of class, Kira, Alannah, and I all created wireframes for our website along with moodboards and postcard ideation. Kira has all of our combined work posted on her blog.
This is what I came up with for ideation (the wireframes on Kira's blog were a combination of all of our ideas and went through a short revision as we collaborated our work).

We also had readings assigned for this week. Here are my notes:

Readings on Mobile Web:

Pgs. 2-23

Pgs. 24-34, 48-51

2-23

fixed layout: the width simply says 800px which means that it doesn't ever adapt as the screen size changes.

fluid layout: the only difference in this source code from the fixed width layout is that the "width" is changed to "max-width: 800px" which implies that when the screen size allows, the wrapper should be 800px, but no bigger. As the screen size changes, the wrapper should adjust accordingly. 

media queries image replacement: This code says that as the screen adjusts, when it reaches 480px or smaller, the image at the top of the screen with be replaced with a smaller image. 

media queries image replacement: In this code, there are 2 screen divs that each have a different image as the screen size changes. It took me a while to understand the difference between the 2 image replacement sites, but I think that in the last one, the larger image size never changed, it just changed as soon as the wrapper became smaller than 480 px. In this one, however, the larger image adjusted as the screen size got smaller until it finally changed to the second image.

Media Queries - Wrapper Background Color adjustment: There are 3 different wrappers for 3 different screen sizes. The background color changes as the screen gets smaller. 

Mobile Web Designers Idea book 2-23

Mobile Specific-You can cater the content , site structure, and entire mission of the site to fit the usage of the site. Ex. HOW interactive conference, mobile version is used AT the event while the desktop version is used to sell and promote the event. 

Responsive- Site is based on a fluid design, a series of fixed width layouts or some combination of both. 

Fluid- design doesn't just scale to fit the space, it adapts along the way. 

24-34

Frameworks are a prepackaged set of code that gives our work a boost by dealing with the most common needs. 

Jquery is a collection of functions written in Javascript so a designer doesn't have to rebuild basic elements every time

Bootstrap is a CSS framework for building responsive sites. 

48-51

Foundation has resources that allow you to very rapidly develop website prototypes.

Fluid Images- Set width to 100 percent and it will scale with the container that it is in. 

http://alistapart.com/article/fluidgrids

3B-ICE DAY

3A-SNOW DAY