Week 6B: Oct. 1

Today in class, each group presented their prototyping programs/ apps that they were assigned to demo. Ours was pretty successful, and it was nice seeing other programs and their different functions to get a feel of which program I would like to use for prototyping. Next, we got paired up with another person to discuss ideas for our Interface project. My partner, Eric and I discussed a few topics, such as chess, groceries, technology, and bee keeping. We decided to go with bee-keeping, because it would not only give us a chance to learn about bee-keeping, but also have fun with the design.

Homework:
- read Chapter 2 of Interface Design book
- read article on medium.com
-do steps 1-3 as seen on medium.com

Week 5A: Oct. 1

Today in class, Levi, Abby, and I continued working on our presentation for the demo and showed each other our progress over the weekend. Levi had suggested to go further in-depth for the Build mode feature, as there are a few different features within that function in terms of adding hotspots to the mockups.

Homework:

-finish demo/ presentation

- find and write three- one sentence topics (learning communities) for Interface project

Week 5: Outside of Class

Over the weekend, I worked on the keycode guide for InVision. Abby worked on the demo and Levi worked on the pages for the demo. Abby, Levi, and I touched base in class on our progress on Monday. 

For the keycode guide I basically highlighted the four different icon functions and explained what each of them do.

Week 5B: Sept. 24

Today in class, we handed in our final versions of the icon project. We then had a discussion in the middle room about how we learn best. The levels from worst to best methods were hearing, showing, doing, and teaching, which leads us into the next project. We are to teach each other about different programs used for interface design. We were broken into groups of four, and one group of three, to tackle a certain program and come up with a way to teach other groups through demos and other methods. My group decided to take on InVision, which is a program that allows you to prototype your screens for an app or website, as well as share them with others through a live conference or invite others to be collaborators. The prototyping part of it reminds me of the Axure, which is wireframing software. Levi, Abby, and I have decided to do a tutorial of certain tasks, since we decided that the best way for us to learn is by actually following along with the instructions. We would have an example ready for our classmates to upload to the site, and from there would follow along with our instructions to make the screens interact with each other. This would in turn allow them to gain better insight on how the InVision app works.

Week 5A: Sept. 22

Today in class, we had a final critique of our icons, and presented our final reports. I had some suggestions on how to fix my icons, as well.

For this icon, I was told to adjust the perspective and make the pencil look more like it is actually tucked behind the worm's supposed "ear."

For this icon, it was suggested to adjust the part of the worm that is pointed, which I thought would convey the fact that he was sticking out of the window.

For all of my icons I was instructed to work on the lines and make sure that they are all consistent. I was also told to keep the expressions of my worm relatively the same.








Homework:
- Make adjustments as needed to icons/presentation.

Week 4: Outside of Class

This week outside of class, I worked on refining my icons and my final report. Below you will see the ideation process I went through throughout this project. The third set of icons are my final ones.

- I further experimented with the "marauder bookworm" icons but ultimately decided that if they were sized smaller, they would be hard to see.

- For my final set of icons, I made close-ups of some of the icons as suggested by peers during the round-robin critique last monday, and added a new one with a magnifying glass. I was also sure to add more personality and expression to my bookworm, which goes with the close-ups as well.

Below is my final report for my icons. It is a bit simplistic, but I feel it gets the message across of my ideation and style for this project.

Week 4B: Sept. 17- Design Studio Visits

Today we drove to Harrisburg to visit two design studios, the first being WebpageFX and the second
AndCulture. Upon walking into WebpageFX's building, I instantly got the feeling as if I was walking into someone's home. We went on a brief tour of the beautiful spacious 4-story building, and then went to the kitchen to talk to some of the employees from different areas of expertise, as well as the president of WebpageFX. What I found so unique about this company was that they hire particularly younger people fresh out of college, and provide them with any further training they may need, instead of looking to see if a potential employee has all their required skills and experience. I appreciate the fact that they would invest in you in terms of giving you the knowledge you need to work there, and giving you the strength to succeed in the business. I also enjoyed the laid back, casual, yet semi-structured atmosphere.

The next studio was AndCulture, which was right down the street. This place was even more casual and laid back, as well as cozy. Though it looked like a studio apartment, each section of the rooms had people grouped into their own small team of expertise, such as designers, developers, strategists, and experience designers. I was more interested in AndCulture while talking to the User Experience designers, simply because I've developed an interest in that field from the Intro to Experience and Interactive Design class that I took last semester. It was also interesting to hear about the different design programs that the designers use, such as Pixate, Sketch, and a few others. I am not the best at Photoshop as much as I am on Illustrator, so I definitely plan on checking them out.

I had a great time today in Harrisburg, and I feel that I got a very good feel of the differences and similarities of design studios in terms of how they work. I really enjoy the laid back, casual atmosphere the most, which I feel promotes more creative thinking, and the fact that you get to collaborate with other creative minds.

Week 4A: Sept. 15

Today in class, we went over our plans for the trip to the two studios in Harrisburg, WebPageFX and AnCulture, which we will visit on Wednesday, so technically this will be the only class this week.

Next, we had a critique for the icons that we illustrated over the weekend. Some of the suggestions I received included adjusting the stroke sizes to make them more even, try out a "Marauder bookworm" theme for our school's mascot, and changing up the focus on the worm to include close ups. A lot of people seemed pleased with the overall bookworm theme for my icon-set, but were either confused by their context or felt that they were too childish for a college setting. Below is what I have done so far in class in terms of adjustments, which includes adding a marauder hat to some and adjusting line sizes. I will further refine them based on further feedback. Please refer to previous post for my original icon illustrations.

Week 3: Outside of Class

This week outside of class, I worked on the illustrations of my icons. Since I received fairly positive feedback on my sketches, I went on and designed them based on the suggestions and kept the book worm theme. I tried my best to create different personalities and positions of the worm. The dotted outline is simply to represent the 5px padding on the icon as suggested on the Noun Project website, and are not a part of the design.

Week 3B: Sept. 10

Today in class, we reviewed the required reading through a little (non-graded) quiz. Next, we broke up into separate groups of 3-4 people and critiqued each others' icon sketches.


I received a great amount of feedback on my sketches, and my peers seemed to really like the theme of a "bookworm" for my icons. I was afraid they might be too cliche, but I am proud and satisfied that I was told that they are an original idea, and is a great idea. Some feedback I received was to change up the position of the worm, as in give him more variation in personality besides the same position he is in in my sketches. Also, it was suggested to have him take on the shape of different symbols, such as a question mark or magnifying glass.Homework:- 8-12 icons (final detail black and white)- start design of final report (cover page, overview, project brief, visual research- be prepared to critique final drawings

Week 3A: Sept. 8

Today in class, we went over the required reading assigned last class, then a few of us presented the icons we found from the icons that we were supposed to find and post to our blog. Next, there was a presentation about metaphor and icon creation which is a good introduction to the icon project. We were then shown the Icon Creative Process. First up is the Brief, which you will see below:

The Brief:

1. What is it's context?
- The context for the utility icons for the Library site is several places. First would be the main page, including the yellow "Ask a Librarian" button, then at the bottom page, for "Finding Info," "Tools and Services," and "About the Library." From then I would branch onto other pages, such as the Request it and EZ Borrow. I might branch out onto other minor pages, such as Articles and Databases, Books, and Research Guide.



















2. What is it for?
- These icons would be utility icons for the Library website to help create a better visual experience for users who visit the website. Some of these icons could even be used outside of the website to promote the library.

3. Who's it for?
- These icons would be designed for the Library's website.

5. Is there a single message?
- I feel like there will be more than one message to the icons, depending on the context of them, some of them to provide better visual navigation throughout the site.

6. Does it need to be an icon?
-  Not necessarily. It could also be a pictogram, such as different animals. However, I feel that it might be a little too childish for the website. I will try it out though and see what others think.

Week 2: Outside of Class

This week outside of class I worked on the assigned homework, which was to write about the library website and its needs for new icons, reading, and finding 15 icons each in the real and digital worlds and posting my findings on here.

Real World Icons

1

1. The icon you see here is for terra-cycling seen on a container of a hair product. This is a new way of giving more kinds of trash another chance to be used, almost like recycling.

2

2. This is the AC adapter for my laptop. I was intrigued by the mass amount of icons on here. I recognize some, such as the warning icon in the bottom left, but others I'm not so sure of, but I will inquire on them in class.

3

3. This bag of packing peanuts had a giant recycling icon on it. This icon is widely known for indicating that the product was either made with recycled material or that it can be recycled.

4

4. Here is an icon indicating a drown risk for children, which was found on a bucket of laundry detergent.

  

5

5. Here is the common Maltese Cross which represents firefighting. I considered this to be an icon because of the fact that one instantly associates it with firefighting when it is seen.

6

7

6. On this bottle of rubbing alcohol is an icon symbolizing the fact that the product is flammable.

7. On this bottle of a hair product is an icon of a person throwing an item in the trash can, which I believe is to symbolize the fact that it cannot be recycled, and should instead be thrown away.

8

8. The windows icon is all too familiar, but recently, with the release of the Windows 8 operating system came the newly renovated Windows icon as you can see between the Function and Alt keys on my keyboard.

9

9. Safety is definitely the key communication here, with two figures lifting a supposedly heavy box that says "team lift," indicating that this box is large and heavy, and requires at least two people to safely move.

10-13

10. The first icon indicates that the product should always remain sitting up in the same position instead of upside down or sideways, for example.

11. The next icon symbolizes the fact that the contents in the box are fragile. It was the box from a big TV, by the way.
 12. The third icon with the umbrella and rain symbolize the fact that the item must be kept dry.
13. The last icon symbolizes that no more than 6lbs can be stacked on top of the box for the risk of it collapsing.

Digital Icons

1

1. This icon is seen here on blogger while writing a post, which is "undo" and "redo".

2

2. This is an icon found on amazon.com indicating that this book can be read on a computer, kindle or phone.

         

3

4

5

6

3. This icon symbolizes a thunderstorm, and is frequently seen on any weather forecast.
4. The next icon symbolizes a partly sunny day, and is also seen on any weather forecast.

7

5. This folder icon is very popular, and symbolizes all of your folders/ files on your computer, all in one easily accessible place.
6. This is an icon representing a map, which is an indication that you can find out the location of this business or organization.
7. Here you see the cart icon for amazon.com, which has the number of items cleverly placed inside the cart.


                   

                   8              9                           10                11        12           13          14            15
8. The vast majority of social media users recognize this icon as the "like" icon for Facebook for a post or a page.
9. This icon represents Google notifications, such as any updates from your smartphone if it is connected to a google account, or any other notification from Google.
10. This icon is meant to indicate that you can upload a file to a website.
11.This icon is the Facebook representation of "tagging" a friend in a post.
12. This is the icon that represents a folder which contains several files.
13. This icon represents a file on Google which is an image.
14. This icon is seen in front of the URL for all secure sites that contain people's personal information.
15. This is an icon seen on the top of any Google page representing the list of apps, such as Google Drive, Blogger, and Gmail.

Week 2: Library Website

The Francis C. McNairy Library here at Millersville university is a rather large facility with several learning tools available, besides the books. They also have their own website that provides information on their hours of operation, a database to search for books and articles, and several other tools to talk to a librarian and request to borrow a book. After viewing the University website, its all too obvious that there is an extreme lack of icons. I feel that the use of icons, even simple utility icons would enhance the overall visual experience of visiting the website. One icon that I spotted for the Request it and EZ Borrow feature on the site was rather hard to make out in terms of what is was or represented. As you can see, after enlarging the icon I discovered that it was a squirrel. No offense, but this whole time I thought it was an alligator and just glanced over it quickly. By adding a universal set of icons I feel that the communication would be better rendered in the website, as well as giving it a clean, uniform feel.

Week 2B: Sept.3

Today in class, we discussed the readings assigned last week, had a presentation/discussion about Understanding Icons, such as Favicons, Ideograms/Pictograms, and Application Icons. We then viewed a TED talk featuring the iconographer who designed the original icons for MAC. Afterwards, we reviewed our icon project, and I chose to design utility/ interface icons for the university library's website, since it could use some sprucing up a bit. We were given the rest of class to work on our homework.

Homework:
-Read Ch. 5 "Icons and Interface," pages 124-145, and 148-149 in Type on Screen
- Capture 15 icons in the physical environment and 15 in the digital environment, and post a 2 line description of what their function is. Variation is key!
- Explore library site and write 200 words on blog of what its about, how it works, and how icons could enhance communication/usage
- Bring sketchbook next class!!

Week 1B- Aug. 27

Today in class, we had a surprise Micro Project. For this one, I was paired with two other classmates. We were then told to create four icons based on a movie of our choosing, which was Finding Nemo. Below is the icon that I illustrated.

Week 1A- Aug. 25

Today was the first day of class, so all we did was review the syllabus and the class objectives. I'm excited to begin the projects for this semester.

Homework:
-create blog
-purchase required books
-Read: "Spotify Iconset" on hicksdesign.co.uk & "An Icon is Worth 1,000 Words" on uxbooth.com