Week 10b

In class we were allowed to do more research and narrow down what non profit organization we wanted to do for our project. We then had time in class to have the opportunity to contact the organization and ask questions. 

Again, my nonprofit organization research was not approved by Pannafino so I have until next class to find out which organization I want to work with, contact the organization, and develop a style tile for my web redesign concept. 

Week 10 a outside of class

We were suppose to research of possible non profit organizations websites we would like to redo. Pannafino did not approve of any of my choices so I'm back into research mode.

Week 10a

In class we had the second mini-project. I was in a group with Rebecca and Mel. I think that we worked really well together. We were assigned an icon and had to design a single page website using the icon only once. We decided to make a "how to build a hamburger" instructional page (that was also silly) using a very large version of our icon. All in all, I think that it was creative and turned out okay given the time period. I would like to make it responsive and work on the typography in order to make it perfect.

WEEK 9 SPRING BREAK!

Thank god!

Week 8b

We presented our beer crawl website today in class. This is the feedback we got in class:

-animation looks good

-nav bar possibly having hover states

-work on scaling of bar schedule

-make date more well known

-responsive have tagline disappear

-fix tagline to foam be cohesive

-icons on home page too large

-add padding to sign up

-no shrink button

-love concept looks professional

-restyle bar schedule completely for each media

-no color on sign up page "first name:"

-taxi add yellow or checkboard

-center social media

-3rd media

WEek 8 a outside of class

LISTS LISTS LISTS!

home page:
image replace for the saying on the bottom of the page of the "no-brainer"
add copyright symbol on the bottom
responsive fix content sizes
ADD IN DATE

sign up:
write logan
move beer cozy up and align
resize shirt and fill out sheet

bus schedule:
look up addresses and fill in content
play around with jquery of having lists appear

donate:
fix banner

bar:
add in the beer content

we needed to add in a favicon that i made
meta tags
and comments in the HTML and CSS

and the final product!

Week 8a

We spent the first half of class lecturing on favicons and meta-tags.


Again we assigned tasks we needed to do in class today:

home page:
-image replace of tag line on bottom (have kira make)
-add copyright
-fix bus on responsive (take away opacity)
-responsive fix content sizes

sign up & promo:
-ariana write content
-move beer cozy up (alannah)
-resize shirt and fill out chart (alannah)

donate:
-fix banner (kira)

bar page:
-ariana content
-group effort of having web be responsive and look good

bush schedule:
-look up street addresses and put them in website
-fix media queries

TODAY IN CLASS REMEMBER TO ADD IN FAVICONS AND META TAGS

Week 7b outside of class

Alannah and Kira attended alumni weekend at Millersville and got some great feedback on our website from professionals in the field. They shared these new insights with me and it all sounded great! We also finished the bus schedule page. Alannah did a beautiful job on drawing the buildings. We originally had them white but made them red and i think it makes the page pop much more. We coded in the times and adding padding and spacing and also a subtle touch of a dotted line border seperator. 


PROGRESS OVER THE WEEKEND:

Week 7b

In class today we had a red robin quick of critiques. We got a lot of really positive feedback. Alannah and I worked on coding, with Alannah doing most of the actual coding as I was dictating the tasks she needed to get done and helping her keep track of the all of the details. Kira was the 'project manager and made a list of things that needed to get done and split up the tasks:

-fint font for banners
-line spacing, color, scaling on all content
-drop shadow/possible grunge on donate icons
-donate button needs padding
-donate button twists hover
-take out grey bar
-donation tag italic
-add titles
-finalize bus for mobile
-pick background color for all content
-beer taps for title bar (600x600)
-content for bar schedule
-link names for bars
-re-illustrate map & bar
-make donate page illustrations of the heart, money bag, and book
-sign up page make = cuzie and tshirt vector
-lesson drop shadow on red bar
-add copyright on bottom

week 7a outside of class

Things we worked on outside of class:

-fix map to look faded on bottom-fix social
-fix social media buttons
-footer color change to tweed
-take out stardust background and make two block color system
-typeface for content = grifata
- we also made icons for donate

Week 7a

We are finally starting to implement more images and divide up content to create more hierarchy. We made the decision to leave the textured background behind and move to divided color to break up content. We want to work in columns of three for the bar and bus page. That grid system was created in the code today along with implementing some images. I also figured out the code for forms and put that on the sign up page. We are working on the color for the background but really like the direction it is going. 

Week 6b outside of class

We got together this Saturday and busted out a huge portion of our website. It really started to come together as we problem solved and analyzed the details of how we wanted it to function. We split up major tasks amongst our group members with Kira being in charge of creating content for the donate bullet points and creating vector beer bottles for our bar schedule tours. Alannah was in charge of creating the vectors of the buildings for the bus schedule page and I was in charge of vectoring a bottle cap as a donate button and creating content for the about section of what the event is actually about. I also helped problem solved getting the fonts to work from type kit we were working on that for a while to trying to make that work.

Here is the content that Kira came up with (although we might not use all of it in our final site):

Bullet points on Donate Page:

Your donation today will directly effect and help the DUI Foundation by:

-Organizing and creating educational programs and workshops of showing young teens the detrimental effects drunk driving can have

-Creating more promotion and marketing materials to help promote and practice safe driving

-Establishing more support groups for victims and recovery programs for alcoholics

-Proceeds will also directly help victims and families with medical expenses

Donate Page:

The DUI Foundation hopes to reinforce the ideal that a single drunk driving accident can permanently have a negative impact on you, passengers in your vehicle, and anyone else involved in the disaster (drivers and passengers in other automobiles and even pedestrians). With this being the main goal is mind is to prevent ignorance, spread awareness, and promote and practice.

Your donation you contribute today is one step towards creating a safer and better future. Your donation today will be directly involved in the funding for many services the DUI Foundation. The DUI Foundation is  organizing and creating educational programs and workshops of showing young teens the detrimental effects drunk driving can have. Creating more promotion and marketing materials to help promote and practice safe driving. Establishing more support groups for victims and recovery programs for alcoholics. Proceeds will also directly help victims and families with medical expenses.

To find out more information and other ways you can help visit

http://www.duifoundation.org/

Home Page (suggestion under the main about content for event):

It sounds like a broken record to many of us, but no matter how often we hear about the consequences of drinking and driving, it doesn’t quite seem to sink in. It is our goal to break down that barrier of ignorance.

The DUI Foundation hopes to reinforce the ideal that a single drunk driving accident can permanently have a negative impact on you, passengers in your vehicle, and anyone else involved in the disaster (drivers and passengers in other automobiles and even pedestrians). With this being the main goal is mind is to prevent ignorance, spread awareness, and promote and practice.

Each state enforces varying levels of law, policy, and legislation. So no matter where you reside, the DUI Foundation aims to provide state specific facts across our entire knowledge center. One issue we cannot stress enough is the importance of support groups for those who may have been severely injured or have lost a loved one as a result of an alcohol-related crash. Likewise, those battling an addiction to alcohol and other drugs require support and guidance to get them on the road to sobriety. We highlight some of these key programs and provide contact information for people in need.

In the end, whether you choose to drive under the influence is your decision, but we hope to make it a no-brainer.


And here are screen shots of our website so far:

Week 6a outside of class

Our assignment was to draw very detailed sketches of our wireframes. Taking all of our ideas and combining them into one, Kira and Alannah (I wasn't able to make it to the lab this evening) drew our sketches up (with Kira being the main person on this task). 

Week 6b

For the first hour of class we took time to prepare and hear speaker Josh Bryant from Journey Group. We then took this time in class to show Pannafino our wireframes that we drew. He told us the main thing we really needed to have was a home button. So we replaced one of the nav bar buttons which was a donate button to a home button. Honestly the more I looked it, it made sense to have one. So we are creating a donate bottle cap call to action and then that will redirect you to the donate page. So we spent class starting to tweak things with the basic code we had. I then started assigning jobs that needed to be complete by the time we met by Saturday.

Week 6a

In class today we had a quick in progress critique of our new postcards. We got really great positive feedback Pannafino said he finally felt like the whole theme was coming together. Just with using the bus and scaling it and the map for the series was a nice touch. We then went around the room and took a quick look at everyones basic black and white layouts. Ours needed some tweaking which we did in class and then professor Pannafino went over more code and we had time to work.

Week 5b outside of class

We all met up at Kiras house on Friday night and began coding our responsive web layout. It was our first time working together outside of class as a group and it went really well. We all kind of took on different roles within the project, working on our layout as well as postcards simultaneously. We did a lot of sketching to see where we wanted different elements to go. Here is our responsive web layout.

We also decided to split the postcard assignment amongst the 3 of us (1 postcard for each person). Here is the one that I came up with. 

Week 5b

In class we had a red robin of a fast critique class mates just taking notes on new post cards we had made. We had a lot of positive feedback saying we were going in a better direction. For the rest of class Kira, Alannah and I were researching responsive layouts we liked now that we nailed down a concept and theme. We just wanted to create a stronger wireframe from the previous ones we had. Pannafino also met with us and said the same thing.

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