Preliminary Work for Project03

[Meghna_Misson]

Hi everyone,

So sorry for posting late, I had to get all my designs in order before posting, but hopefully my images produce a strong idea of what I plan to go for with this project!
The website that I had chose to redevelop was Toronto Cupcakes, www.torontocupcake.com, which at first glance looks like it was created on the spot. So, for the preliminary critique, I had produced two versions (A and B listed below) and their computer-and-mobile-sized representations as well. For the mobile-sized concepts, they have the same layout as their computer-sized counterparts, but I have manipulated some of the buttons on the website pages to provide better functionality: such as turning the navigation bar into a compressed hamburger button (which was also used in the original design of the Toronto Cupcake website). All of these designs were created through Adobe Illustrator, but I might try to incorporate the use of Photoshop later on to provide more illustrative elements to aid in the overall composition of the website's appearance.

What I plan to move on from here is changing some of the font styles that I have used in each of the roughs in order to stretch out my opportunities, as well as playing with the color scheme more, and adding more imagery.

--

Version A
(Computer Sized). The red line that crosses over the designs in each image represents the area visible on the computer screen, which stops at 1090px height-wise; this is supposed to imply that the user can scroll through the page to see more information made available.

Home Page.
(The announcement is opened in this image, but can be closed by clicking the "X" in the circle located near the top of the blue rectangle).

(Here is were the announcement tab is closed so that the user can better view the main image of the website. It also shows the smaller dropdown list that appears when clicking one of the main pages on the navigation bar, "Cupcakes").

Inner Sample Page.

Version A
(Mobile-sized). Again, the red line is supposed to indicate the visible viewing area that the user can see within the height limit of the art-board/mobile device, which is set at 980px.

Home Page
(The Announcements tab is opened and is the first thing that pops up when the user loads up the website. Again, it can be removed by clicking on the "x" button in the top-left of the blue box it is set in).

(The Announcements tab is now closed, showing the full view of the home page in a mobile-sized format).

(This image depicts the fly-out menu that will occur once the user selects the hamburger button in the upper-left of the navigation bar/pink header. This image also includes the smaller dropdown list that will appear once tapping on one of the main pages of the website, "Cupcakes").

Inner Sample Page

--

Version B
(Computer-sized)

Home Page

Inner Sample Page

Version B
(Mobile-sized)

Home Page

Inner Sample Page

--
Below is my analysis comparing two websites of other cupcake shops in Toronto Ontario, Canada to that of the original Toronto Cupcake site in order create a list of needs and goals that I focused on when developing these concepts:

Meghna Misson
GRC 175 3001
Spring, 2021
Site Needs and Goals
Analysis
25th March, 2021

The two websites that I will be comparing to the website that I had chosen to fix for Project03--Toronto Cupcake, www.torontocupcake.com-- are: Cupcake Junkie, www.cupcakejunkie.ca, and Dlish Cupcakes, www.dlishcupcakes.com; which will aid in establishing a list of needs and goals for my redesigned site. How I picked these websites were solely based on location since they were in the same area as Toronto Cupcake in Toronto Ontario, Canada--distanced from each other by a couple of miles--this then means that they are competing cupcake shops; so, in order to better improve the design of Toronto Cupcake’s website, I had to take into consideration how these two websites were developed. At the end of this analysis, it might additionally answer as to why Toronto Cupcake’s site will have a much more visually-pleasing appearance and better functionality in the final result compared to the other two websites listed above.
Out of these two websites--Cupcake Junkie and Dlish Cupcakes-- I had came to the conclusion that more photos were needed in order to best showcase what the cupcake store [Toronto Cupcake] had to offer; placing the logo and name of the shop at the very top of the website’s visible viewing area so that it is not lost in the information set below throughout the rest of the pages, which also emphasises the idea that all the store has to offer belongs to this website specifically; consistency throughout the use of a color scheme, and lastly a balance between professional and stylistic fonts.

[kmohara5190]

Hi Meghna,
I really like your second design! It looks very clean, and I like the cupcake image you chose. The only thing I would do is move down the map and text a little bit, so that the home page can showcase the top half more. Good work!

[Krueckl]

Nice job on your designs. I like version B the best but it is hard to choose because both look great. You used great colors and it definitely screams cupcakes with all the pictures and the pastel colors you used. You have a good amount of information and the navigation is easy to read. This looks really professional. Nice job!

[jacklyn_yamine]

Hi Meghna,
We did the same site! I too chose to stick with her original brand colors of pink and black (dark brown?) and I really like how you took out pieces from the menu so that they are all showing across the screen, rather than how she has them all in that hamburger menu. While I like the pink color and the blue color that you've added, I don't think that green is working very well and because of the blue, is not really needed. I like that you put the hours of operations in the main header area so that they are right there and that you made the COVID-19 announcement be a close-able pop up. I do like your Version A design better than Version B, I think your layout of images and text are working much better on Version A. Although, while I do like that you tried to add a background graphic with the lines and stars, I don't think they are necessary or working very well and think you should keep it clean like your Version B. Other than that, great job!

[Instructor]

Wow! That's one of the most thorough Project presentations I've seen in my classes. Nicely done, Meghna! I especially appreciate the demonstrations of the different page behaviors and that you showed us your whole designs rather than just what was visible in the requested resolutions. I'm going to hang on to this presentation and use it as an example for my future classes.

I like your Version B the best. It's a little cleaner and the imagery is more prominent. In fact it's positively image focused. Which is great when you are selling cupcakes and cake making for events. I mean, just look at that big ol' cupcake with a cherry on top on your home page. It's making me hungry just looking at it. That's what you want to have happen. I also like it's overlap with the main image. That adds a little bit of visual interest that catches the eye. Your header and footer not only make for a great framing device, but also mirror each other. They have a main color and then a little strip at the bottom/top that's a tint or shade of their main color. A great effect. Speaking of color, this website makes great use of it. White, pink, teal, and black sure do work well together. I don't mind the use of a hamburger navigation on your computer design. It goes with your aesthetic and you take the time to demonstrate what it would look like in one of your roughs. I really like seeing that!

What's missing is the Sine Wave of Sugar™ from your Version A. It's the best part of that version and I think needs to be transplanted over here. It adds such a nice little jolt of color and visual interest and would be great for adding texture to this layout. Snag it and use it as your content background like to do on Version A's inner pages. I'd make your blue announcements window teal to match the teal used in the rest of the design. I think your bodycopy is probably a little bold. I'd recommend lightening it.

Excellent work!

[Hamistani]

Hello Meghna,
These look really good! I prefer the 2nd design because it looks cleaner. I love how easy it is to navigate. The only thing I would change is adding some of the colors or flare that you had in the first design into the second design. Great job!

[Mal-Festio]

Hello Meghna,

I think both of your designs have really great styles. The wavey lines is my most favorite element in your designs. If you go with B, then I encourage you to also incorporate that as well. Maybe its just me but the body copy's line spacing feels a little tight, but it hard for me tell if its just because of the resolution.

[gavin_clouser]

I really like the nav bar on the second one. I think its really good and recognizeable and gives a feel of familiarity to the site. I think it looks and works best as well.

[ItsAllisxn]

Hi Meghna,

Wow, this is a really nice and complete presentation! The visible lines really help me to get a grasp of what this will look like when scrolling. I love the color palette you picked as well. I'm personally leaning towards your second design because it looks much cleaner and it's very easy to navigate. I did like your wavy design element from your first layout, and would love to see that incorporated into your second layout. Great work!

[it's_crysta]

Hey Meghan, I like that you added some more colors to go with the pink and I like the little waves and stars pattern you made. It looks very good, great job!