Week 6 Outside of Class

On Thursday night Nicole, Megan, and I worked together to get the home page started and a sub page started. I worked on the sub page while Nicole worked on the home page. This is what the sub page looks like:

We all came back into the lab on Friday and worked on it again. I worked on the Schedule of Events page and the other sub pages.

We changed our typeface of our body copy and got rid of the red box around "Saturday" and "Sunday."

I started to get the information into the Contact Us page. We haven't styled it yet but I just wanted to get the information into it.

I also just copied the code for the header into each of our subpages. This is the Directions page.

This is the Attractions & Food Page.

This is what Nicole and Megan worked on together:

This is the home page scaled down to mobile.

This is the full home page.

This is the home page scaled down to iPad size. We want the navigation to be two and two here so we are still working on that.

Week 6B

Today in class we briefly had a Skype chat with Josh Bryant. Then we had the rest of class to start working on our website.

I was able to get our logo and name in. Then I took time finding web fonts and background textures. I came up with a list of possibilities for each.

On Campus Talks

I went to the 12:30 and the 3:30 lectures.
The 12:30 lecture was Jennifer Aldrich:
She is a content strategist and UX designer at Schoolwires. She edits wireframes and does usability testing. I really enjoyed listening to her because she was so upbeat and full of energy. She also gave us some great advice such as: create a professional Twitter account just for business, create a LinkedIn account, don't put tons of pressure on yourself to land your dream job right after graduation, it's easier to find a job when you have a job - even if it's a job you don't particularly enjoy, don't get stuck in a toxic work environment or doing a job you hate, and don't be afraid to try new things that aren't related to your degree. She also gave us a list of UX design tools that she uses on a daily basis that are helpful. The list included: Solidify, InVision, SurveyMonkey, Asana, Silverback, GoToMeeting, UXRecorder, Balsamiq, Skitch, and MailChimp. A good piece of advice she gave was to prioritize your work to stay productive and that it is okay to be a specialist and not understand what other people are talking about. She also said to stay up to date with the new techniques and technologies. She also made a good point in saying that jobs in New York may pay better but the cost of living in New York is higher than urban areas.

The 3:30 lecture was Josh Bryant:
He is the lead web developer at Journey Group. Josh pretty much focused on the different parts of web. He talked about System Administration, Back End Development, Front End, UX Designer, and Graphic Designer. He went through and briefly talked about what was involved in each job and what makes them good quality. I enjoyed the question part of the lecture more than him talking because I felt that most of the stuff he lectured about was stuff that we already kind of knew. He said that there is nothing like real-world experience and internships are a must. He also said that his tip for kids right out of college and looking for a job is to be willing to get your foot in the door - no matter what cost. Josh also said that you will not get your dream job right away - just like Jennifer said.

Week 6 Outside of Class

Outside of class, Nicole started to translate some of our imagery into our watercolor style.

Week 6A

Today in class, we briefly critiqued our new postcards. The only tip that we really got was to maybe flatten out the tractor. Then we really shortly looked at our wireframe mockups. Then we had a demo on jQuery. We had the rest of class to start sketching out what we wanted our pages to look like. Nicole, Megan, and I were asked to have all of our pages sketched out before class ended. This is what they look like:

This is what our home page would look like.

 This would be our Attractions & Food page.

This would be our Schedule of Events page. 

 This would be our Directions page.

 This would be our Contact Us page.

Week 5 Outside of Class

Outside of class Megan and I made two responsive wireframes.

This is what our home page will look like.

This is what it would look like scaled down. It is still a work in progress. We struggled to find a way to have two of the navs next to each other at this point in the scaling.

This is what our Attractions & Food subpage will look like.

This is what it will look like scaled down. We had the same problem here that we did with the home page. We want to have two pictures next to each other at this point in the scaling.

Nicole also worked on more postcards for our site:

                                       

She said, "The first postcard is our final revised one. After getting feedback from the class there was only a couple of things that we needed to change from the original design. I created all 4 of these designs. We kept with the theme of what goes on during the festival so the second postcard that I made was reflecting the hayrides. I wanted to include the apples instead of having people riding on the back. The third design was just a series of different apples, and the fourth design is still a work in progress with the pie for a pie eating contest. I have a thought of just having a table with three pies all eaten or a stack of pies all eaten, but for now I am just going to play around with different ideas."

I also read pages 99-145 in the book. Here are my notes:

Design Styles

Super Clean:

• tends to contain a nice array of sites that vividly demonstrate an ability to be timeless
• extremely refined, content easy to consume, layout is free of all unneeded clutter

Flat Pixels:

• flat pixels is essentially the polar opposite of skeuomorph-based design
• flat pixels is a rejection of skeuomorphs and instead focuses on extremely simplified and flat designs
• lack the visual depths

Decorative:

• buck the trend toward flat pixels and lean toward more decorative or elaborate designs
• mean "decorative" by the sites relying on designs that contain lots of extra decoration that creates a distinct look and feel
• there are two reasons this approach is so seldom used
• with responsive design, it is really complicated to adapt a site to many different screen sizes
• as a result, designers have gravitated toward minimal, streamlined designs, as they are simply easier to adapt
• second, on mobile devices we tend to be more concerned with load speeds and therefore lean toward cleaner and simpler designs that load less decorative stuff

Minimal:

• if there is ever a default design to fall back on, it is definitely minimalism
• minimal sites tend to have smaller file sizes due to the streamlined design
• minimal sites can more easily adapt to various layouts via responsive techniques as there's less stuff to deal with
• a well-executed minimal site has the tendency to feel slick and is a timeless approach

Color Block:

• the use of solid color blocks as a design element makes perfect sense in the mobile world
• much like the minimal style, it is bandwidth-friendly and extremely flexible for responsive design

Atypical Layouts:

• it seems that no matter how often the industry agrees on ways of designing things, there are always designers our there that manage to bend and adapt the web to do extremely unique things
• the result is a set of sites that go together only because they are all so distinct and different
• if your site pushes the boundaries and doesn't adhere to the norms, you should carefully consider a streamlined interface that helps minimize confusion

Typography:

• on the mobile web, a lot of focus is placed on streamlining things so they load fast
• as a result it seems that custom typography is often overlooked
• though text in images is a bit out of style, it is still an extremely viable option
• given how users scan content, it makes sense to ensure that the key words stand out

Type as Design:

• with responsive and mobile web design, a lot of emphasis has been placed on streamlining things
• this means that on many websites, there is little in the way of decorative design
• this leaves the work of beautifying a design to the text in the page

A Big Button Array:

• when it comes to building a menu on a mobile site, it seems that many designers build a vertical list of text links
• there are many things to love about this style, but one of the most significant is the usability
• the buttons are easier to touch than thin rows of links

Light On Dark:

• white text pops better on mobile
• more dramatic

Dark On Light:

• most of the sites represented create a rather start contrast between the dark text and the light background
• this nearly black and white feel gives the site a crispness that is beautiful and easy to look at
• on the flip side, if you compare this to the light on dark sites, I think you will find that those sites have more of a pop to them, while these feel far more subdued and contained

Black and White:

• oftentimes, these were paired with an accent color, but still had a strong black and white base
• has a powerful aesthetic that speaks volumes about the content of the site
• it is amazing how much power a simple dash of color can have when you exercise such extreme control in the rest of the design
• if you try to emphasize everything, you end up emphasizing nothing

Week 5B

Today in class we critiqued our postcards. Most people said they liked Nicole's one with the items in the basket but like the typography of mine. Then we had in class work time to fix our postcards.

This was our fixed postcard. We switched some of the apples, got rid of the type, and made the pie a little darker.

Then we met with Pannafino to talk about our layouts. He said he like my Clean homepage and Megan's Responsive homepage. So we decided to use my clean homepage for our homepage and use Megan's homepage layout as a sub page layout.

Week 5 Outside of Class

Outside of class I redid my postcard. Again I did two - one with the title of the festival and one without. I decided to incorporate Nicole's design of the balloon animals into my postcard. I used her balloons and added apple items at the bottom of them. I used apples, an apple pie, and a glass of apple cider. I also stuck with the watercolor feeling because someone in the critique mentioned it as an idea.

Here is Nicole's redone postcard:

She said, "based off of the information that was given during class I redid my postcard, and added more elements of the festival. The apple pie a brush for face painting and of course some apples."

Here are Megan's redone postcards:

Week 5A

Today in class we briefly talked about the design firms that we visited and the readings that we had for homework. Then we critiqued our postcards. The feedback that I got on mine was to possibly use more kid friendly colors and to be more creative in placing my pictures on the page - maybe put them in the shapes of something. Then we spent the rest of class listening to a demo on responsive design.

Week 4 Outside of Class

This weekend I read Chapter 4 (56-98) of the Mobile Web Designer's Idea Book. Here are my notes:
Responsive Elements
Navigation:

• nav changes from a list of plain text elements on the desktop to a stacked list of buttons on the mobile
• the desktop version works great for those using a mouse and is just what you would expect
• in contrast, the mobile version relies on the user touching it with their finger
• in this situation, a much larger visual target is perfect for the job
• another key problem you might face with navigation is space
• there is a little widget often referred to as a "navicon" (short for navigation icon) that hides the navigation until it is needed

Logos:

• the logo is one of the most important elements we can consider modifying as screen size changes

Calls to Action:

• a call to action is the primary goal of your website
• these call-to-action elements are the buttons that take people toward that goal

Promo Space:

• an incredibly common part of many home pages is a prominent promo space
• in this critical space, designers often communicate the core purpose of the website
• typically we find a large to-the-point sales pitch that sums up the service
• this is often matched with a smaller but more in-depth description of the product or service
• then we usually find a screenshot or image of the product
• finally, we usually end with a call to action, compelling the user to take some critical step
• the end result is a powerful marketing space that attempts to quickly connect with visitors and spur them on to becoming customers
• don't be afraid to take radical steps toward condensing your site for smaller devices

Sliders:

• when it comes to popular web widgets, none seems to have attained the popularity that the standard image slider has
• there is a huge range of pre-built options to choose from and it is so easy to pack lots of content into one
• one of the most important lessons of the responsive slider is that the structure can (and probably should) change as the screen size changes

Forms:

• forms are one of the more complex HTML elements to style and are often the sources of much  frustration
• fortunately, one of the best ways to deal with forms is to simply change their layout, not necessarily their styles
• another approach that limits the pain of customizing forms for each layout is to focus on the stuff surrounding the form
• in order to limit the pain, we can also plan a design that easily shrinks

Content:

• with responsive design, it seems that a lot of attention is given to the structure of the site, while the content itself is often left to fend for itself
• in this area, one of the most interesting trends is the introduction of multi-column content

Images:

• of all the things we pack into sites, text and images are the most fundamental and unavoidable of elements
• as it turns out, there are really two core approaches to adapting images
• the first is to simply size the images up and down
• the images on these sites remain the same and simply shrink or grow to fit the needs of the layout
• the second option we have is to create images that contain fringe content that can be safely cropped off
• the third option is to replace images to fit each layout
• in this case, the code of the site could display one image for desktop users, a different one for tablets and a third one for phone-based users

Maps:

• implementing maps is super easy on the web; you just grab a bit of code and plug it into your site
• two things remain relatively challenging: customizing maps visually and adapting them to fit various screen sizes

Footers:

• of all the elements presented here, the footer is perhaps among the easiest to address
• in some cases a footer can be so simple that it need not change at all
• the footer contains three columns of content that conveniently stack on top of each other
• some elements of a footer can be hidden as the screen size decreases
• one of these lists takes a purely vertical approach, while the other simply wraps to multiple lines

I also did one more sketch for the home page using the feedback we got.

For this sketch I added the schedule of events to the home page.

Here are Nicole's new sketches:

This is her new home page sketch.

This is her new sub page sketch.

Here are Megan's new sketches:

This is her new sub page sketch.

This is her new home page sketch.

I also created a postcard for the website.

This was the first one that I started with. However, Megan said that she wasn't a big fan of the tree so I took it out.

This was what I ended up with.

I also did a second one because I wasn't sure if we were supposed to have the name of the event on the postcard or not so I did this one too.

Here is Nicole's postcard:

She said that she wanted to do animal balloons for a prize that the children would get for coming to the festival.

Here are Megan's postcards:

She also thought up a couple ideas for the logo.