Final Critique

After presenting my final project, I've received a lot of criticism and positive feedback on all of my pages. Some of them were clear oversights on my part, but others were great ideas that I never considered. Some of the criticisms I received are:

• Center my navigation bar
• Banner is too empty in the middle
• Home background color is different from ticketing and schedule page
• Lower opacity of texture on my schedule page
• Some text is difficult to see in the footer due to similar colors
• Some tab titles are misleading
• Needs more consistency across pages
• Links on home broken
• Missing favicon

Overall, i'm very satisfied with how my final project had turned out and I definitely think it was a huge improvement from my last website. I've definitely learned a lot more through this experience and will carry on these skills when creating my next website.

Week 11 Outside of Class

Outside of class I finished the rest of my wire-frames and created alternate versions of those as well. The images below are my wire-frames for the tickets page along with what it'd look like on desktop and mobile. For these pages, I had to find a way to include the many ticket options as well as illustrations for them. The difficult part was deciding how to fit all of that into one cohesive design. Since it was a lot of information to give to the user, where my illustrations would come in was a challenging, but I managed to figure it out.

 

Week 11B

Today I worked more on my wire-frames for my upcoming project. For my next website, i'm creating 3 different web-pages. These will be the homepage, schedules for movies and events, and ticket sales/information. I had already made good progress with them and know what kind of information i'd like to include on each page along with some illustrations. For each page, I had also created a version for tablets and for mobile, so there are three versions of each page. (Desktop, tablet, mobile) Below are my home page and schedules page, along with alternate versions of them when viewing on different devices.

 

 

Week 11A

In class, we started working on wire-frames for our website. It was actually challenging deciding on a layout for a website based around a film festival. I had thought initially that since it was a film festival website, it should incorporate more imagery than usual. But this website in particular has a lot of information that I need to present to the user, such as the scheduling of shows, tickets, and so on. It was difficult arranging everything in a way that made sense and didn't come off as cluttered, but i'm still currently working on it.
I had also received feedback for my sparkbox style assignment. Overall, it felt too bland and unmotivated, which I somewhat agreed with. It didn't accurately reflect the feel that I was going, since I wanted something more colorful and animated. Below is my revised version of the sparkbox assignment. In the final product, I do plan to incorporate more original illustrations and editing any preexisting images. But this is a better idea of what i'm aiming to create.

Sparkbox Style Assignment

On the side, I had also been working on a smaller assignment that showed what kind of colors and imagery i'd use in my upcoming project. Although I did touch on that a little bit in my visual inventory, this more accurately reflects exactly what it might be. The images I had chosen were screenshots from some of the films they have featured (Aside from the film reel which I had created.) The color scheme isn't a definite, since I was still playing around with different colors as well as gradients. On top of that, I still plan to add patterns on top of the colors too, so a lot is still subject to change and will definitely improve.

Week 10A

In class, I had spent the rest of the time given to finish my visual inventory. I had compiled it into one comprehensive video which is embedded below. Here, I explain how I plan to handle color, typography, layout and other elements. The most difficult part of the whole process was determining which websites would be a good example to show in my video, since many of them didn't exactly have what I had envisioned. Overall, I do think the examples I had chosen accurately reflected what I wanted my final product to be like. Soon, we will critique other student's visual inventories and give advice on what should be changed, removed and added.

Week 9 Outside of Class

I had spent this weekend working on my visual inventory even more. This time, I looked for examples to show how i'd possibly do the layout along with how i'd handle size. As far as layout goes, I was thinking of doing something similar to the Wendy's website shown below. I really appreciate how they had done the side-by-side, grid sort of layout. They had managed to do it in such a way where even though all of the content is close together, it doesn't feel overwhelming or cluttered at all. This is something i'd like to try in my project, as it looks extremely organized in my opinion. My idea though is that I would have entire screenshots stretch across the page rather than food. Similar to how they have one half of the column display food while another is a description, I think i'd rather stretch the boxes and one have one show the movie along with the description over-top of the image. Unfortunately it is a little difficult to explain, but i'll create examples soon. The next I had chosen was a good website that showed how i'd handle size. This is somewhat similar to space, but I wanted to have a large banner at the top of the website on the homepage. This would make it more unique and dynamic in a way. 

 

Week 9B

In class, we continued to work on our visual inventories. I gathered more images and examples that i'd like to use and incorporate into my own project. The two that I had found and carefully considered were the Wendy's website and Nike. When focusing on typography, I felt like Wendy's was exactly the kind of style I was looking for. Bold text, large images and a clear message. When envisioning what a good website for a film festival would look like, I imagined something like this but replaced with stills from featured movies instead. The text would be replaced with the description of the movie, schedule and so on. Similarly, I thought Nike was effective in conveying how I wanted to show space. I wanted to have a lot of space to allow the user to breathe and simply view the images without any interference. Since it is a film festival, I believe people would want to see large and intriguing screenshots from a movie.

 

Week 9A

In class, we discussed what a visual inventory was, its uses, and how it relates to our current project. After the lecture, we had started to work on it, which actually proved to be a little difficult for me. I was a little confused what the difference was between a visual inventory and a mood board, since both focus on the feeling we get from our organization in a way. I had started this assignment by gathering the images I would use and laying out my presentation. Overall, it isn't too much to show yet as I was planning it more than actually putting it together, but this is what I have so far. So far i've completed the introduction and decided the kind of color that I plan to use in the upcoming project. Those colors would be softer gradients.

Week 8 Outside of Class

Outside of class, I researched more potential non-profit organizations to do my second website on. The first I had my eye on was the Alley Cat Allies website. Although i'm not too interested in animals, I do have a lot of ideas for the website. Overall, it is pretty well designed I think, but it does seem too cluttered. In addition, I do think it could be redesigned into something more modern. After working on my last web-page, I do feel as if I could do better. When calling the number listed on the website, I didn't get a response. I did call when they most likely in, so I will try to reach them again soon.

https://www.alleycat.org/

The second website that I would enjoy working on is the Asian American film festival. Similar to the other website, I do think it's well designed in the way that it conveys information. But it could be more modern. As far as design goes, it's very bare-bones and could definitely use more personality. Since it is based around Asian american culture, I believe I could take elements from that and include it on my redesign.When calling the organization, I asked the same questions that I asked the previous organization that I had worked on. These being:

• Who uses the website and why?

I was told that the website was meant to be used for anyone who wanted to find a schedule that showed what films were being showed and when. It was also meant to be used for those who wanted to purchase tickets, passes, and other items. 

• What is the main reason for the website?

Similar to the last response, I was told the website was meant to advertise the event and keep track of a lot of useful information. It is also meant to be used to capture the interest of those who may want to attend the event.

• If they could change or add anything, what would it be?

When asking what could be changed, I was given the response "To have something more modern". I do think the website was well organized and designed to a degree, but it could be improved.

https://www.asiancinevision.org/

Lastly, I had decided to choose the Lancaster City Fire Foundation. This time, I decided to choose something local. Of course, the Lancaster City Fire Foundation is an extremely respectable organization which is why I do believe it would be good to redesign. The website itself delivers the necessary information, but is still rather bare-bones. Most of the website is blank in terms of design and could be improved upon. Unfortunately, I did not try to contact this place as I recently decided it'd be something interesting to work on. I will ask the same questions when given the opportunity.

http://lancastercityfirefoundation.com/

Week 7 Outside of Class

Over my weekend, I had finished my second page as well as completely finishing my third page. This was difficult as I had to create new illustrations, banners, text, and other things over the weekend. Unfortunately, I couldn't figure out why it was unable to resize correctly. When resizing, the text and images get jumbled into one column rather than sorting itself out correctly. My last page was an about section. What had initially made me choose Blaxican was their charity. Using donations and tips given to them, they feed those in need. The about section section also gives a brief history on the creation of the Blaxican. Here are some snapshots from my final website.

Week 7B

Today, I worked even more on my website and began working on my second web-page. As mentioned before, I had changed the purpose of my second web-page from being media to menu. I had spent this entire period gathering images of food for the menu, researching their menu, and sorting out my code for a gallery. A big part of our project is to be sure that it has the ability to scale for mobile. As of right now, it isn't scaling correctly (along with my first web-page) but I do plan on adjusting it next time I work on the project.

Week 7A

No class.

Week 6 Outside of Class

Outside of class, I created buttons that would lead to my second page. Instead of having a media page, I decided to replace it with a menu. I believe a menu is much more beneficial to a website based around food. With the addition of my buttons, I had finished creating the front page as well. Over my break, I had almost completely redone my website. I decided that the pure white backdrop made the website appear to be unfinished along with the floating images. To fix this, I added the buttons as mentioned before to fill blank space.

Week 6B

During our class critique today, I had many of my questions about my website answered. Although it did function fairly well so far, I still felt as if my images were outdated. My biggest question was whether or not my green banner that I had created was effective. I didn't put it into my webpage since it was still in-progress. Based on the previous banner that I had created, I had made a second one in a similar style. Another question I had asked was whether or not the navigation was effective and any recommendations for it. I had a very good idea to combine the navigation and banner into one.

Week 6A

In class, I worked on better images for my webpage. I added a new banner as well as choosing different images for food. I believe that the images I had chosen and created seemed a little outdated. After getting criticism from other classmates, I was reassured that the images that I had chosen weren't the most effective. Adding the filters to the food made it seem unappetizing, and the banner could be improved upon. After using other food-related websites, I realized the changes that I had to make.

Week 5 Outside of Class

Outside of class, I started working on the homepage to my website a little more. It's far from complete, but this is what the homepage will look like so far. I plan to replace and edit a few of the images as well as adding more buttons on the front page. I'm also going to adjust the navigation bar at the top as well. As mentioned before, the homepage is far from complete but I believe this is a very good start towards what I want to accomplish.

Week 5B

In class, I had readjusted the layout of my website tremendously. A while before class, I had a much better idea for a layout that's way more modern compared to my previous one, which reflected an older website. It does look very simple for now, but i'm simply setting the foundation for the website itself. All of the colored blocks will hold some kind of content, that being an image or a body of text. The website itself will only be 3 or 4 pages, which means I still need to do layouts for those as well. This weekend, i'm planning on either setting the foundations for my subpages, or finishing the front page to completion. While I do believe working on the foundations for each of my other subpages should take priority, i'm really eager to get started working on the front page and adding actual content to it.

Week 4 Outside of Class

Outside of class, I had created a business card for Blaxican. We were only tasked with creating the front side of it, so I tried putting a lot of relevant information on the front. This included an image of their food, the name of the brand, and what it actually is. While it is simple, I think it's effective in the way that it presents information. Although I do think I could have added more information, I didn't want the front to be cluttered and be more aesthetically pleasing. Any other information would go on the back of the card in almost all situations anyway. In addition, I had also chosen the font types I will most likely use when creating the website. Below I had included both. I wanted to keep both of them fun and as close to the original style as possible while making it feel more modern and professional.

Week 4B

I've redone my mood-board to more accurately reflect the kind of feeling I got from the restaurant. While I did keep a lot of the images, I replaced a few that related directly to the location, such as food trucks and images of food. I find this to be way more effective, since it captures that feeling rather than simply retelling what the place actually is. In addition, I had redone my sketches on how my website would be laid out. I did it on a larger scale since my other sketches were way too small. To briefly explain my sketches, I plan on adding a slideshow near the top of the page that cycles through images of their food. On a website that advertises their food truck and restaurant, I feel like it's almost mandatory for it. I approached this thinking "If I were hungry and interested in a new place to eat, what would I be looking for?"

Week 4A

In class, we had went over our mood-board and sketches that we had created.  Unfortunately, my mood-board didn't accurately reflect that "feeling" I had gotten from Blaxican, but rather what it actually was. My mood-board didn't focus on that essence, which made me turn back and rethink what kind of place this actually is. This will allow me to be able to create a website that more accurately reflects what this place actually is. What I will definitely keep when I remake my mood-board though is the UI elements and colors. I wanted to keep the bright and energetic colors while keeping it related to fast food. Similarly, I had to go back and redo my sketches as well. My sketches were too similar to wire-frames, and should have actually been how the website would be laid out. I already have a good idea on how I will layout my website, though.

Week 3 Outside of Class

Outside of class, I worked on a mood-board that reflected Blaxican. After looking at their social media and images that they had posted, this was the feeling that I had gotten from them. When I think of Blaxican, I think of a fun and upbeat environment. A location that provides both a warm community and food. Although most of the customers at Blaxican are of color, a lot of the community is very diverse. Not only of color, but age as well. I tried to add images that weren't directly from Blaxican though. I included images of delicious soul-food along with restaurants and food trucks that screamed "fast food" to me.

Week 3B

In class, we had a short review on responsive web-design. Afterwards, we gathered in groups of two and took turns explaining how we plan to layout our respective websites. I had a lot of useful feedback, as I got creative ideas from three different people.
My first group member suggested a certain way that I condense a lot of the webpages since
I have a pretty clear idea on how i'm going to do the desktop version of the website, but I feel like designing for mobile is going to be a lot more difficult. I was thinking of creating a sidebar navigation rather than a top bar when a user accesses the website through a mobile device. When he/she taps on a hamburger button in the corner, a side menu would slide from the side of the screen. The reason I decided to do this was because it might prove to be a little more challenging if a user were to try and navigate through a navigation bar located at the top on their phones. I'm very careful in being sure that all buttons are easily reachable and the navigation is clear, as that was my main problem with the website.

Week 3A

For the first half of class, we were given a lecture on fluid vs fixed layouts, grids, and other elements related to web design. Most of this was review for me, although I did learn a few new things such as images being replaced based on the size of a browser window. For the second half, we broke into groups and took turns reviewing our personas and design objectives for each of our individual websites. My group had agreed that my personas and overall ideas for redesigning the website was going in the right direction. The biggest problem that stuck out for not only my group members but myself was both the navigation and how bare-bones some webpages were. They had also given me really new and neat ideas that I haven't considered before, such as a couple creative things I could do with their logo. I'm still playing with some of their ideas, so i'll post some of them in the near future once I figure out what i'm going to do exactly.

Week 2 Outside of Class

Outside of class, I finished creating the personas that I believe could be potential customers to this restaurant. After looking at various reviews and images of the Blaxican restaurant, I had a general idea of what the crowd there was like.
I've also tried to get into contact with them about the website using the number provided on their website, but I wasn't able to reach them for other reasons. I've sent them an email which I feel i'd find more success in and am currently and hopefully waiting for a response soon.
My design objectives for the website are ambitious. As I mentioned before, I do like the chaotic nature of their website, as it makes it seem more fun and casual, since it does advertise a food truck after all. I believe this will be difficult, as I want to keep this kind of nature, yet have an easy to navigate and responsive website. The website itself had a lot of web pages which were somewhat confusing to get to. For example, the landing page gives you a few web pages you can explore, but you have to dig deeper if you want to find something specific like their media page. I also want to completely redesign the background of their website. While I did say I enjoyed the playful and chaotic nature of it, a lot of the elements on the website makes it a little overwhelming to look at. A lot of the images, links and texts are unaligned along with the very bright red, white, and green flag makes it difficult to look at. There's a lot of blank space on the website, which I plan to condense and organize. A lot of their images, font choices and colors clash as well, which is my biggest issue with the website. I plan to find and stick with a consistent theme through each web page while also keeping it fresh and fun for any visitors.

Week 2B

In class, we reviewed which website would be the best to work with for our project. For this project, we're focusing on which would be the best to redesign. It was recommended that I redesign the Blaxican Food Truck website. Not only does it need a redesign, but it also has a lot of information that I could use when i'm working with it. We had also taken a vote on other student's websites to see which would be best for them. Before starting the project, we need to contact our respective website owners and ask the following questions:

• Who uses the website and why?
• What is the main reason for the website?
• If they could change or add anything, what would it be?

Currently i'm creating personas, the target audience for this service. After this is done, I will decide how I will redesign their website and my objectives in doing so.

Week 1 Outside of Class

Outside of class, I revisited some of the sites I mentioned in my last post to see which ones I believe needed a redesign. This could be for many different reasons, but i'll include them for each individual website below.

Quest Comic Shop

http://questcomicshop.com/

This is a website that I believe needs a big redesign. It has a lot of potential though, since it does deal with comics which I believe is a very fun theme to explore in design. Although the website includes a lot of the important details such as dates of events they're hosting and recently arrived items, it isn't too pleasing to look at in my opinion. On each section of the website, it looks very bare-bones and even has a few overlapping elements here and there. In addition to that, there's a lot of clashing elements and inconsistencies throughout the website. This includes things such as the font changing on different bodies of text on the same web-page and very aggressive colors used throughout. Since it is a website based around comics, I think they could definitely do something unique like having a comic-style layout or a slideshow showing popular comics that they own. I also think it'd be more inviting if they included different types of media for the events that they're hosting. For an example, when they host a game night it would be better if they had a gallery that showed images or videos of them participating. The absence of any kind of media along with this web-page makes the comic shop seem very uninviting.

Blaxican Food

http://www.blaxicanfood.com/

In a way, I sort of enjoy the wild design of this website. Although I think it could still use a redesign, the chaotic nature of it makes it seem like a fun spot to be at. I believe they could use this to their advantage while making it more aesthetically pleasing though. While being chaotic and wild in design, it's actually pretty organized as it has necessary subsections such as pictures of the restaurant, menus, media, an about section and more. Much like the last website however, a lot of these subsections look bare-bones and could definitely use a lot more content. 

In addition, there's also similar problems with inconsistencies in design, such as using different fonts for different bodies of text along with font choices. While I don't think using different fonts on the same page is necessarily a bad thing, a lot of them don't have any relation to one another, such as comic sans being placed next to impact. While this might seem nit picky, it does make the web-pages somewhat overwhelming as it includes many bright colors, clashing fonts and images that seem to be placed awkwardly throughout. Overall, the website does fulfill its purpose. But I do believe it could also do with a redesign.

Rhode Island Comic Con

http://www.ricomiccon.com/

This is another comic related website that I believe is overdue for a redesign. Much like the other previously mentioned websites, this one has a lot of information such as a contact page, event schedule, photo-op, and even a live animated countdown timer to the event. While having so much information readily accessible is a huge plus to any upcoming event, it's way too cluttered on the web-page. If a visitor were trying to find a specific page, I do think it'd be a difficult task for them. With so many images, links and other media so close together, it's pretty overwhelming for even a comic fan like myself. This website suffers the complete opposite of what "Blaxican Food" had. While I do think cramming so many images into a small column was a poor choice, I think there is a way they could keep their images while having an open and easy-to-navigate website for users. I think a slideshow would be extremely beneficial to them. I noticed that they do have a window that allows you to scroll through their guest celebrities, comic book creators and exhibitors, but I think they should do that with most of the media on their front page. This would allow them to keep their images while allowing the user to breathe. 

LuxRally

https://luxrally.com/

LuxRally is a group that hosts car rallies full of exotic cars. The website however doesn't do it much justice. While it does have a media section that does a great job in showing what the rallies are like, I believe the website should reflect that. While I do think it was creative how they had added an image in the background that scrolled with the user, I think the bodies of text on the sides are too blank. Along with the font choices and placement of certain elements, the website doesn't stand out and make me feel excited, which is the whole purpose of an exotic car rally. Interestingly enough, I also noticed that the website doesn't respond well on some desktops I had used to preview it. I've checked a few of the images in the media section and they couldn't open at all or took a very long time to. Even the homepage had made my browser lag. I would had believed this would be my fault if it didn't happen on another desktop I had tried to preview this on. I do wonder if the non-responsiveness was just on my end, but it does concern me. 

City of Irving Book Club

https://www.cityofirving.org/1113/Book-Clubs

While I believe this website does have a good choice of colors, fonts and images, the unaligned banner at the top is really jarring. This follows you across many of the other web-pages on the site, giving he illusion of all other elements not being aligned. In addition, the images just below the banner don't align correctly with the window just below it. This is extremely distracting to me, making me unable to explore the website without being drawn back to the unaligned windows. On a lot of the other pages, many bodies of text and links also appear to be awkwardly placed. When viewing other sections of the website, the banner at the top also comes too far down into the window also. With this being the case, it doesn't give the viewer much space to view the actual content on their website. 

Overall, I don't think this necessarily is a "bad" website in terms of aesthetic choices. While a lot of the elements are unaligned and a little overwhelming to a visitor, it does have good design choices. I believe they could use these fonts and colors in their redesign. 

Week 1B

In class, we had a lecture that explored concepts such as flexible grid-base layouts, media queries, flexible images and media along with a few others. In addition, we also learned about how different devices will affect a user's browsing experience when viewing web-pages. After the lecture had ended, we spent the rest of our time finding websites that we believe needed a redesign. This could have been a website that was outdated, nonfunctional, or even just aesthetically unpleasing. After finding a list, we viewed other student's websites that they had found and compiled a list of reasons on why they needed a redesign. Below are websites that I had found:

Farm Show Magazine

https://www.farmshow.com/

Blaxican Food

http://www.blaxicanfood.com/

Car Show Link

http://www.carshowlink.com/

Quest Comic Shop

http://questcomicshop.com/

Rhode Island Comic Con

http://www.ricomiccon.com/

Heroes Comic Books

http://heroescomicbooks.com/

City of Irving Book Club

https://www.cityofirving.org/1113/Book-Clubs

Vintage Car Rally

http://www.vintagecarrally.com/

Luxury Rally

https://luxrally.com/

Rivers Sweet

http://www.riversweet.com/

Week 1A

Today was the first day of class. We've went over the syllabus, guidelines and things that were expected of us in the class. We've filled out and submitted a student info form that asked us to evaluate ourselves in different areas. Lastly, we were given a small reading assignment that focuses on responsive web design.