Week 5: Outside of Class

This weekend we were asked to create a fully responsive main page with mock-up content and 20% of our graphics done. I found coding the site to be much easier than expected and find the grid system to be very intuitive. My main pages are relatively basic, so there isn't a lot of content on them. However, I think this is where I want a majority of the graphic elements to be. As mentioned in my previous post, I am struggling with graphics and how to present my site without it being too loud or tacky. I am hoping to get feedback next class, but here is my site so far:

Week 5b

Today in class we had our pages looked over and critiqued before beginning the actual coding and designing of our site. Professor Pannafino said it looked like I was going in the right direction. So, I began to code the basic layout of the site. I also began to think about the graphics for the site, which are proving to be more difficult than expected. I feel like it is difficult to have a pop art page without it being flashy. However, I also don't want it to be too plain. So far, I am stuggling with this and will have to see where it goes from here. I am hoping that next week I can get some suggestions of what to do with graphics that will help me move forward.

Week 5a

Over the weekend we were asked to create graphic wireframes for the other two pages of our site, both desktop and mobile. Here are mine:

Mobile pages for the main, about, and directions pages.

Desktop directions page.

Desktop about page.

Today in class we practiced the grid system of responsive web design. It was honestly a lot easier than I was expecting. Basically, all you need to do is define rows and columns. For each "section" of the page, you define a new row. So, if I wanted to have a header, then a feature area, and then an about section, I would define three rows. Then, within the rows, you can define columns for different sections of content. A full column is the whole row. A half column is half of the row, and you can have two half columns each with different content, and so on and so forth. Hopefully, I can apply this to my project to create a beautiful responsive site.

Week 4: Outside of Class

This weekend we had to create basic graphic overlays for our wireframes to get a general idea of what they could look like. Like I've mentioned in my previous posts, I am interesting in taking pop art/comic art style graphics and applying them to my site. I want to do it in a way that it is present, but not overbearing. Here are my ideas for the main pages of the desktop and mobile sites:

Desktop site

Mobile site

So far, I think I have a pretty good idea of what I want to do, however I also know I want some sort of subtle background texture. I wasn't sure which, as I am torn between a few ideas. I will ask some other people what they think would be best so as to avoid the site from being too busy.

Week 4b

Today in class we mentored some students in the lower level class. I think I helped out the 2 students I had, but after a while I ran out of things to talk about or instruct them on. They seemed to have a pretty good grasp on what they were doing, but I also helped them with some shortcuts that they didn't know about. Overall, it was a good experience, although I worry about helping with Photoshop, since I have never had proper training in it and know next to nothing about it.

Otherwise, we just discussed our wireframes. I was told that I am off to a good start. The next step for us is to sketch out some visuals for our main pages of the mobile and desktop sites. This is due next class. I began doing some research on other comic convention websites to see what they had done visually. To my surprise, many of them were very subdued and didn't feature many pop art, or comic book style, elements. I felt that I wanted to really incorporate them, without it looking tacky, of course. This dilemma will definitely be something to think about as I begin my sketches for the graphic design part of this project.

Week 4a

There was no class today due to Professor Pannafino being out sick. However, we were given the assignment to create more wireframes for our other pages which will be on our site. I actually redid the ones I already posted, so here are all of them:

This shows all of the mobile pages. The top left is the main page, which is short and shows important details, a brief explanation of the event, and an option to buy tickets. Underneath that is the event details page, which gives the schedule, map, and option to buy tickets once again. Finally, the bottom right shows the directions page, which shows the user how to get to the event. It also talks about parking.

This is the main page for the desktop site. It talks briefly about the event, gives important details, and shows VIP guests who will be in attendance. It is also 1/2 places to purchase tickets.

This page is for the desktop site and is focused on getting to the event, as well as the hotel package one can purchase for the event. It also talks about where to park.

This wireframe is for the part of the website which will discuss the event happenings and also show vendors, the map, and other details someone who is going to/is already at this event would want to know.

Week 3: Outside of Class - Mood board and Wire-frames

This week we were asked to create a mood board to reflect what we wanted our future event website to feel like. To create this mood board, we had to collect fonts, images, textures, and colors that we felt were inspiring. Since my event is a comic convention, I wanted to pick a lot of items that went with a pop art theme. I want to create a website that is fun and colorful, without being overkill. Although the images used were not created by me, I am pretty good at doing a pop art style, so I feel that I will be able to do some cool illustrations. Here is my mood board:

As you can see, there is a lot of pop art inspired imagery on my mood board. I think that creating images with hand lettering and illustrations could be very successful for this event website. I am unsure if I want to do a light, or a dark background, so I included both. I think that including some of the dotted texture that is used for shading in traditional pop art could be an interesting background texture. I was also thinking about maybe have a comic strip in the background. If I do choose a texture, it will be very subtle so it is not overpowering. I feel like the biggest problem for me, style-wise, will be to avoid being overwhelming or tacky.

The second thing we had to do was wire frames for both our desktop and mobile sites. Like I mentioned in a previous blog post, there are some differences in content between the two, although not much. The mobile site is definitely more focused on getting to and being at the event, whereas the desktop site is more in-depth in all aspects of the event.

Here are my desktop site wire-frames:

"above the fold"

"below the fold"

Here are my mobile wire-frames:

Week 3b

Today in class we talked about content and which content should be used on desktop pages vs mobile sites. A lot of it seemed like common sense, although there are smaller details that you really have to consider the importance of when moving to a mobile site. We had to assemble this data in two lists, one for mobile elements, and the other for desktop elements. Here are my lists:

Desktop:

1. Why a person would want to attend the event
2. Date and times
3. Activities and event schedule
4. VIP Guests
5. Ticket sales

Mobile:

1. Dates and times
2. Event schedule
3. Ticket sales
4. GPS and directions
5. Social media

Week 3a

This week we began learning about responsive design and how to code the HTML and CSS for it. Here is the exercise we followed for it outside of class.

The HTML coding was probably the easiest part. All you had to do for the HTML was add the meta tag which essentially tells the browser to base the width on whatever device it is being displayed on.

The CSS code was a little more in-depth because you had to define what would happen as the browser "scaled" as it was displayed on different devices.

As you can see in the bottom of the first image and in the second image, there are different things that happen based on what size the screen is. For example, when the screen is larger a certain number, it is displayed as though it was on a desktop, like so:

However, when it becomes smaller, the sidebar is brought underneath the content and above the footer. At this point, the sidebar is still visible. This change is shown here:

Finally, as the screen becomes even smaller, perhaps on a smartphone or other smaller device, the sidebar disappears completely so only the header, content, and footer is being shown:

This is where the importance of content comes into play. Like we were discussing in class the other day, it is important to keep a happy medium between larger and smaller devices so the user isn't missing out on content because of how they are viewing it. It is important to think about this as I move into designing my event website. 

Week 2: Outside of Class - Event Website Information

As of 2/5/2017, the owner of the event website has yet to reply to me. I sent one email, which seemed to be taken as spam, and then decided to send another from my personal Gmail in an effort to reach out again. There is no other way to contact them based on their website. Since I have reached an impasse in this regard, I decided to really analyze the website and try to formulate what I think the responses may have been. If I do end up receiving a response in the near future, I will post and update.

The first question was who uses your website and why?

I believe the average user for this website is someone interested in the event that they may have heard of from somewhere else. They come to the site to learn more about the event and to purchase tickets.

The next question was what is the main reason for the website?

The main reason for the website appears to be to purchase tickets for the event as well as to provide information on what will be happening during the event.

The final question was if the owner of the website could change or add anything, what would it be?

I feel as though I cannot properly answer this question, because I am biased since I will be redesigning the website. However, I would say that it is likely that the owner would like to add an event schedule as well as fill in the missing pages that exist there right now.

Week 2b: Personas

Here are my personas. My primary persona is:

Amy is a high school student. She loves comics and anime and enjoys going to conventions. She is pretty knowledgeable about these types of events and has good technology skills. I picked her as the primary persona because most people that attend these conventions are already knowledgeable about the topics being presented - in this case being comics, anime, and pop-culture. Amy represents the average attendee at Central PA Comic Con.

My secondary persona is:

Robert is a middle aged father of one son. He spends a lot of time at work, but wants to get more involved in his sons interests that he doesn't really know about. His son really loves comics and spends a lot of time reading them and drawing his own. Although Robert doesn't really know much about comics, he has heard of the Central PA Comic Con and thinks it is something they could go to together as a way of bonding. Robert is okay with technology, so he needs a website experience that is easy to understand. Robert is not your traditional Central PA Comic Con attendee.

Week 2a: Design Objectives

For the Central PA Comic Con website, my design objectives are as follows:

• Create a place for users to come during the event to find information about what is happening currently.
• Design a site that represents the event visually so the viewer knows immediately what they are looking at.
• Draw the user in with interesting visuals.
• Design a site where the information is displayed in a way that makes sense and is easily accessible.
• Make it so viewing and using the site is an enjoyable, stress-free experience. 
• Create cohesion.

These are my core design objectives. The website has a lot of content that is good, but not well displayed and looking at it how it is currently, I don't see how someone at the event could effectively use it while they are there. That is the biggest thing I would like to address, because at a larger event like a convention especially, it is important to be able to look at the website for direction on where to go for certain things. One way of doing this is by having the page of events at the Comic Con displayed in a way where you can either view it in a schedule format, or you can select a time/date and see what is happening then. They have something that allows for the purchase of pictures or autographs from their guests and I think this could be included in my proposed idea. Another big thing for me is making it obvious this website is for a comic/ pop-culture related event. Right now, it is plain, boring, and not well designed. There is little cohesion or good information architecture. Someone might be turned off immediately just by how it looks, without even reading about the event. I want to change that through interesting and captivating visuals. Obviously, one of the most effective ways of doing this is bringing in pop art style visuals. I can imagine a header with bright pop art illustrations that fades into the background. I could study comics to see common colors and themes and then apply them to the website. As for the information architecture, the tabs on the left just are not effective. Many of the options there could be combined so that there is less menu options for the viewer to pick from. Some other small issues in the page that need adjusting is that there is a huge awkward empty black space that extends to the bottom of the page. Both the menu and the main content are squished into a small wrapper area. The readibility of the buttons for the menu is not very good as it is white text on a lavender background. The cyan color of the main body and "header" text is also very jarring to the eye. These small fixes are all encompassed in designing the site so it represents the event better. Overall, there is a lot to do here, but by defining my design goals, it seems easier to tackle.

Day of Design: George Hakim

The second speaker I attended for Day of Design was George Hakim, a Creative Project Manager at Toyota of America. I was interested in this talk because I know how important storytelling is for a business, but also because another field I am interested in is animation, which is big on storytelling. Hakim gave a brief introduction and said that he came from a background in graphic design and worked at many different places before ending up at Toyota. He then went on to describe some history of storytelling, in that we have been telling stories since the beginning of time. With developments in technology, we began to see new avenues of storytelling. One of the most recent and important ones being virtual reality. After this, he showed us a short clip from a TED talk describing the Golden Circle as a method of thinking. The speaker in this video described how the average person thinks of the what, then the how, and finally the why. He said that the difference between these people and successful, inspired leaders was their thought process. He gave Apple as an example and said that great companies like these think of the why, then the how, and then the what. The ultimate message of this video was that people buy "why" you do what you do. George Hakim then went on to say that Toyota uses this thinking process and goes even further by asking "why" five times to find out the core message of the product. He then explained some different important terms they use at Toyota. The first was "hoshin" which means goal. They pay a lot of attention to the big picture. The next term was "muda" which means waster. Hakim said that they wanted to be able to explain to a non-technical person what they were going for and to avoid inaccessibility. Another term he described was "genchi genbutsu" which meant to go and see or to get to the source. At Toyota they always research the history of whatever they are doing to better understand it. After he explained these terms he went on to show a commercial for the 2014 Toyota Corolla (which I'm pretty sure I've been to the filming site of, as a side note). He used the commercial to explain that when marketing to people they wanted to keep in mind their target audience. For this commerical in particular, the appeal was supposed to be to a younger audience and to highlight that the car never goes out of style. While they wanted to attract a potential new audience, they also wanted to maintain their current audience. Hakim said that Toyota was all about customer first, and that that drove all of their decisions. The other core component of Toyota was "kaizen" which means continual improvement. After talking about this, he went into their process of development at Toyota which is to ideate, create, test, refine, repeat. Another way this was described was to plan, do, check, act, then repeat. What I found interesting about this was that it was very similar to Alexander Reyna's description of the process at MLB. What this says to me, is that it is likely a consistent process throughout much of the industry, so it is definitely something to keep in mind. While I found all of the talk interesting, the most interesting part was when Hakim talked about the Kiki/ Bouba effect. I actually wish that he would've gone more into this, however what he did say about it really interested me as it had to do with character creation. Basically this was a theory that people attributed certain characteristics to certain shapes and that more "bad" characters had Kiki shapes than "good" characters, who were mostly made of Bouba shapes. However, the fact that they still take this into consideration made it interesting in this context, nonetheless. Overall, I found George Hakim's presentation to be interesting as I never really thought about what exactly went into storytelling from a company's perspective. His talk definitely gave me some things to think about and I will likely research more about it as I later move into my career.

Day of Design: Alexander Reyna

The first Day of Design speaker I attended was Alexander Reyna who is a Creative Director for Major League Baseball. Initially, I wasn't really sure what to expect from this talk, however I actually found it to be the most fascinating of the two I attended. Reyna first spoke about his background in the industry, about 25 years, which he boiled down to making stuff, tinkering, motion, interactivity, art, and curiosity. He then went on to speak about what he does as the Creative Director for MLB. The goal for MLB is to make the future and to drive innovation in the field of baseball. For Reyna, this means pushing the user experience and interaction. Some of his experience in this field has dealt with creating user experiences at all intersections of media. One example he gave that he said was a huge breakthrough was the creation of instant, 3D play-by-play moments on live TV. This allowed for the viewers of the game on TV to get in depth statistics about the play that was happening right then. This was a big example of what kind of experiences they were trying to push for. After speaking about some of his career examples, Alexander Reyna went into talking about his process and some simple rules he wanted to share with us as we progressed into the field. His process was very simple, being sketch, feedback, wireframe, build, and repeat. I found this to be interesting because it is very similar, if not exactly, what we are doing and have done here in school. It was nice to know that what we were learning was applicable to "the real world".  He also spoke a lot about personas and how important they were when developing a product or experience. Hearing this was also reassuring for the same reasons, and I also found it interesting how in-depth he went with them. One of his examples was for this game that had to deal with dogs that was aimed at a younger female audience. He said that while they consider age, gender, likes, dislikes, they also think about the users family life, their parents, what types of devices they have access to and for how long, those kind of things. Some of the things he listed I had never thought about, but now that he mentioned them, I see why they could be important and definitely why they are helpful. Finally, Reyna spoke about five rules that he has come across in his time in the field that he lives by. His first one was to aim for simplicity, because people should just get good design. The next one was that honesty is obvious and that UX doesn't hide the truth. He said that designers needed to avoid dark patterns and gave us a website that could help us better understand what he meant by that. Looking at the website helped me better understand what he meant by this and simply put, a dark pattern is something that tricks the user into doing something they may not want to do. His third rule was that users who trust, stay. This one was pretty self explanatory and really extends to all facets of business. His fourth rule was that consistency equals comfort, meaning that a consistent design makes a user comfortable. His final rule was to create delight by making products that work right. This rule I really liked because ultimately, that's what most designers are trying to do, but sometimes it can get lost in the process. Overall, I found Alexander Reyna's talk to be really interesting and also reassuring. Perhaps the best part for me was when he talked about being involved in the game design industry because that is where I want to be some day. It was a great experience hearing from someone in the field and knowing that there are plenty of opportunities out there for us in all fields.