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

Week 2b outside of class

Our homework assignment for the weekend was to create a persona for our website. Kira, Alannah, and I all designed our own personas and gave feedback to each other through our facebook group. We were also supposed to call event coordinators and ask questions regarding our event. We are making ours up, however, so we didn't have anyone to call. We also rewrote our design objective of 500 words and integrated all of our ideas together.

The Lancaster Bar Crawl

The Lancaster Bar Crawl is a bar crawl charity event that will be happening in downtown Lancaster City. This bar crawl is an event that will bring people from all parts of the city and Lancaster area to promote a small town community, raise money for a charity, and drink responsibly. The whole point of this event besides having a good time and bringing the community together is to help promote safe driving. All proceeds will go towards two foundations; The DUI Foundation and Stop the Texts Stop the Wrecks.

One of the key components are the bar crawl is to promote and practice positive actions for people to take when driving. Transportation will be provided to all bar locations through out the night. These bars include: Annie Baileys, The Federal Taphouse, The Taproom, The Lancaster Brewing Company, Dip Co., Aussie and the Fox, Brendees and the 915, The Marion Court and Yorgos. The best part about this bar crawl is that transportation to be taken home will be provided to all participants. This is what is really going to attract people about this event and help practice the notion of taking proper steps for safe driving.

Through out the night to help promote the idea of a community coming together is including live performances. We are not only helping a good cause but also helping local music businesses in the community by having a band at each bar to play. This is another piece of the puzzle to help put this event together to add charm and to add the tight knit community feel.

 Now it comes down to how do we put all these ideas, feelings, looks, and emotions into something that we can promote for this charity event. This is where Alannah, Ariana, and Kira come into play. It is our job to help create an experience for the participants before they event step into the bar. We are going to create a responsive website for the Lancaster Bar Crawl. When we sat down and talked amongst ourselves we all agreed on the idea we want our website to have a pub charm by creating a fun, dark, rustic feel to our website.  Most importantly want to communicate this look and feel through the use of typography and photography. We want to create a brand through these uses.

There are many key design and fundamental elements that the Lancaster Bar Crawl website needs. The key components have to be for people to be able to view the website and see what the event entails. From our readings and learning in class we have to have this website to be mobile first and stick the core ideas and message that need to be told. As said before responsive design is a key component since many people will view this website from their phones. The feel we want is to have this event to be classy yet fun. They will have access to the map showing the pub route and what order the bars we will go in.  Another tab will feature a sign up page for individuals to register for the event and to have another option of another contributions they want to make to the two foundations.

We also need to feature and highlight specialty beers and deals associated with the charity event. The website will also feature heavy social media coverage. The Lancaster Bub Crawl will be promoted on Facebook, Twitter, Instagram, and Pinterest. 

Week 2 b

We had our first mini project today! We were assigned to a group of 3 and then had to redesign "rainbow learning centers" home page into a responsive page. My group consisted of Leslie, Nicole, and I. We split up the work by giving Leslie the task of coding, and then Nicole and I developed the graphics, found images, and typefaces for the page. Before any decisions were made, we all consented to the final product. Initially, we were making good time, but as the time crunch continued we got stuck on a few coding mishaps. We eventually figured out the problems by working together and by googling the solutions.

Today we also had our design proposals due for our event website. Kira, Alannah, and I all wrote up our own proposals, but we will be working as a group.