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: