Icons

The icon assignment was probably the most challenging assignment for me this semester. Below are all three versions of my icons, including hand drawn icons, and two computer versions.

I think one of the reasons this assignment challenged me so much is because it forced me to focus on skills that I feel are my weakest: an open ended project using programs I am not the most familiar with using.

Here is my version 0. I strongly valued our in class activity with creating these icons because it really helped me to think outside of the box.

IMG_20140518_193643_006

 

 

Below are my first versions using a computer.

Slide13 Slide12 Slide11 Slide10 Slide09 Slide08 Slide07 Slide06 Slide05 Slide04 Slide03 Slide02 Slide01

For my second attempt, I updated some icons that I thought needed to be updated including the art and PE ones. I thought some of my first attempts worked well so I kept them. Below is my version 2:

Slide13 Slide12 Slide11 Slide10 Slide09 Slide08 Slide07 Slide06 Slide05 Slide04 Slide03 Slide02 Slide01

I think my biggest struggle throughout this assignment was getting onto “paper” what I was envisioning. As I became more comfortable using the computer to create icons, I felt they improved dramatically from basic lines to having more character. Overall, I’m happy with the icons because I did feel I improved from version 0 to 2.

Advertisements

Laundry Instructions

For the laundry instructions, I tried to make clear and concise steps.

For  version 0, I listed out the different steps on a piece of paper. I think without this step, I would have not been able to successfully create versions 1 and 2.

For my first version, I made a powerpoint listing out all of the steps. My first attempt at this project was to just get all of the steps listed. I don’t think my version 1 was the best in terms of visualization and thought the feedback I got was very helpful.

Version 1:

Laundry instructions

For version 2, I cleaned up the presentation, added check boxes and made the instructions a bit more clear.

Version 2:

laundry instructions v2

I found this project to be hard because there were a lot of different elements to decipher into one checklist. I think the lack of personal experience going through the steps myself hindered my ability to fully list out the steps in version 1. For version 2, I tried to really think through all of the steps, and the easiest way to read them as a user. My class feedback was extremely helpful to me because I was able to talk through all of the steps and see how my classmates described the information.

Overall, I think this project challenged me to really think as a user. For the next time I need to create listed instructions, I will perform the actions personally to be fully prepared for creating the instructions but now feel I have the skill set to provide clear instructions.

Landing Pages

For the homepage landing page, I wanted to do something that was extremely simple and easy to use.

For Version 0, I sketched out a sample webpage using simple grids:

KKprojectv0

I wanted something that one conveyed a simple wireframe, and two, showed ease of use. As I began to envision what I thought the kids would like, I used Dreamweaver to put onto a webpage what I had on paper.

Version 1 turned out like this:

KKprojectv1

 

I wanted to keep the text very simple and really highlight that the website should primarily be used as mainly a jumping off point to other websites. I also chose to use a fun background color to be age appropriate and give some flare to the site.

After receiving feedback, I decided that while my website was simple, it didn’t provide enough information as well as provided the wrong information. For instance, I did not need to include a blurb about the school because the users of the site already knew that information. For my final version, I changed the text a bit and added some helpful clues to users as well as changed the background:

KKprojectv2

I discarded the colorful background and decided to use white so the links would really pop. Furthermore, I added arrows as a visual for users. Ultimately, I decided not to use other pictures besides the school’s logo because I did not want to overwhelm the students. The school logo is something familiar, while other photos from different websites may not be and I wanted to avoid confusion.

Overall, I liked working on this project because it incorporated coding skills from previous classes that I needed to brush up on as well as made me really think of what would be easiest for the user. While my webpage may not be the most glamorous, I think its simplicity will help the user achieve his/her goal.

 

Portfollio

For my portfolio, I chose to focus on three projects, plus the creation of a logo. The projects I chose to highlight were:

1. Keys
2. SUCCESS Logo
3. Cafe James Kids’ Meu

I chose these three projects to focus on because I thought I was most successful at these projects / showed the most improvement.

First, I thought about my traits:

IMG_20140518_103838_698

Next I thought about what I wanted to do for my portfolio:

IMG_20140518_103849_099

For my logo, I thought about the duality of my life and combining my professional life with my “city” life. Currently, my days consist of going to work in Virginia, and then running home to drop off my car and head into DC for either social activities or LGBTQ volunteerism. When thinking of a logo, I focused a lot on the duality of my life and decided that my logo needed to highlight both my social and professional lives, which are quickly merging.

For my logo, I chose to use my whole name, Liz Dean, as one word – mainly because it represents two worlds coming together as one, as well as highlighting the fact that I am known as “Liz Dean” in both my professional and social worlds. I chose to use hot pink and aqua blue because they are my favorite colors- again depicting the combination of my duality. I decided to use Arial Black because regardless of if I am in my social or professional life – I am always consistent, upfront, focused, and clear cut, which I think is represented. It also helps that I have a short name that flows:

Screen shot 2014-05-12 at 5.55.48 PM

 

Below is my first version of my portfolio. I went with a poster because I felt it was something physical.

 

IMG_20140518_103953_935

 

The poster sticks with the duality theme because I have two projects on the front and then the third project on the back so the poster needs to be physically flipped over.

The first image is the front side and the second image is the back side on the poster.

 

ImageImage

Inspiration #16

Font selection could help the government save $400 million. According to Suvir Mirchandani, a 14 year old high school student who conducted a font study, the government could save millions if the government switches from Times New Roman to Garamond on its documents. According to his study, the boy claims that Garamond is thinner, meaning less ink would be used.

Here is the full CNN video: http://www.cnn.com/2014/03/27/living/student-money-saving-typeface-garamond-schools/index.html?iref=allsearch.

The story also trended on BuzzFeed as well – http://www.buzzfeed.com/alisonvingiano/meet-the-14-year-old-boy-who-could-help-save-the-government.

The big questions are is this accurate, and if so, would there be any change.

Inspiration #15

I came across the cool article about the evolution of the Gill Sans family: Gill Sans Test Proofs and Original Drawings From the Monotype Archive (http://www.eyemagazine.com/blog/post/signature-typeface)


Here’s a snippet from the article

Gill Sans was the first of Eric Gill’s typefaces to be released by Monotype. The design was inspired by the lettering Gill produced for the shopfront of Douglas Cleverdon’s bookshop in Bristol in 1926. Gill Sans Titling (Series 231) was released by Monotype in 1928.

Following the success of the display face, a number of variants were added to the type family, including a roman and an italic (series 262, published in 1930), as well as an Ultra Bold (shown here, originally named ‘Double Elefans’ by Gill and published by Monotype in 1936). By the mid-1930s the Gill Sans family included more weights than any other typeface available at the time.

 

I found this article to be really interesting because it goes into the history of font development. I think it’s really cool to take notice how fonts were developed in the past vs. how they are developed now.

Inspiration # 14: Dyslexie is a typeface for dyslectics.

One thing we’ve talked a lot about in class is readability. I found this movie online about a new typeface for people with dyslexia. Although this wasn’t an issue we specifically focused on, I think it’s great food for thought, especially with the populations we’ve been working with this semester.

From the YouTube description:
The typeface dyslexie is now available on http://www.studiostudio.nl/bestellen
Dyslexie is a typeface for dyslectics.
The University of Twente did research on the typeface. Hereby a part of their conclusion:
“The dyslectics made fewer errors, than the normal readers, on the EMT with the font “Dyslexie”. This is an indication that reading with the font “Dyslexie” decreases the amount of reading errors.”

Inspiration #13

One of my favorite topics this semester has been about font. I like that we’ve discussed the impacts each font type has as well as thought about what our personal style is. Before taking this class, I would just chose whatever the default font was, without much thought about my personal preferences. 

For my inspiration, I found an article written by a very Courier-passionate person: Why Courier Should Be The Font Of Record. 

http://www.buzzfeed.com/dray/courier-should-be-the-font-of-record-4666

The author also makes a joke about Comic Sans and uses the hash tag of TeamCourier. 

Definitely a fun read, but most importantly, brings home the fact that people do take font choices very seriously. 

 

 

Photo Essay: Landing Pages

For my photo essay, I decided to look at five different school district landing pages:

1. Montgomery County, Maryland, https://www.montgomeryschoolsmd.org/

Image

I was pleasantly surprised to realize how much I liked this landing page. The website features scrolling images with text for more description as well as a plethora of other resources. I think I was most surprised by this website because it features many best practices including a site map and easily usable navigation links so the user always knows where he or she is on the site. Furthermore, the web page is not photo heavy, but the photos used do have a cohesive purpose.


2. Prince George’s County Public Schools, Maryland http://www1.pgcps.org/

Image

There are several things I like about this landing page:

1. The website is extremely accessible.
In the upper left hand corner, users have the option to both change language and text size. I think that’s really forward thinking for a school district to have those options, so I appreciate the initiative.

2. The option to donate to the school system.
I think the website developer was extremely smart to set up the donation section the way he/she did. The “DONATE NOW” button is not intrusive and is incorporated in such a way with social media buttons that it makes donating seem more social than anything else.

3. Calendar on homepage.
The landing page is structured so the calendar appears above the fold of the webpage. I think that’s a really smart move on PG County’s part because it helps parents have easy access to events.

3. Carroll County, Maryland, http://www.carrollk12.org/

Image

Carroll County’s website is very student focused. The website has a set of about five scrolling images and the majority of the images/blurbs are highlight students and student successes. Furthermore, any user who goes onto the site is easily able to find news about the county because it is featured front and center on the homepage. The design is a bit simple, but I think it’s effective for the user demographic.

4. Baltimore County, Maryland, http://www.bcps.org/

Image

I think the layout of this website is extremely interesting. The grid style coupled with an image heavy webpage is a unique way to portray information but I think works well. A few things to also note:

1. This website also has the change language feature
2. The county tries to engage users via social media (as depicted in the image above)
3. The website is extremely colorful. I find it interesting that there’s so much color on a public school site with adult users, especially in comparison with the other MD county websites. However, I think the color scheme works well and makes the county seem like a very happy and inviting environment.

5. Frederick County, Maryland, http://www.fcps.org/site/default.aspx?PageID=1

Image

Out of the five sites, this is my least favorite, however I do think there are some key take aways from this landing page:

1. There’s a sign in link easily accessible to users. My assumption is this sign in feature is probably for staff, but I think it’s smart that they have it right on the homepage and easily accessible.

2. The slider images are not cluttered. Each image speaks for itself and users have the ability to scroll at their leisure through the images using the arrows.

3. The colored boxes help to differentiate topical information. Often times websites chunk all information together haphazardly. I like how this county puts like information in designated areas on the homepage.