Preliminary Work for Project 03!

[Meghna_Misson]

Hi everyone,
Sorry for posting late, but here is my work so far for Project 03! The badly-designed website that I decided to choose was: https://art.yale.edu. What I worked on for this redesign was: organization, layout, consistency, and color scheme--since it seemed to be missing almost all of these! My first approach was going for something more appropriate that seemed professional for a graduate school, while the other went for a more playful appearance in order to better match the school's intended courses--Painting/Printmaking, Photography, Scultpure, etc!

Note: The red line that crosses all of the images indicates what is being shown on the visible screen area for both the computer format (1920px X 1080px) and mobile format (640px X 960px), before the user would scroll down throughout the rest of the page's contents.

For inspiration, I had used competitor websites to Yale-School of Art such as: Rhode Island School of Design (RISD) https://www.risd.edu and School of the Art Institute of Chicago (SAIC) https://www.saic.edu in order to see what Yale-School of Art's website was lacking. A few more websites that I had used were:
https://colorlib.com/wp/university-website-design/
https://www.awwwards.com
https://sizzer.nl
https://www.behance.net
https://www.designspiration.com
https://coolors.co

Version A
(Computer Format 1920px X 1080px)

working_versiona_01_home_page_01.png (5.44 MiB) Viewed 455 times

working_versiona_01_mobile_home_page_01-02.png (27.44 MiB) Viewed 455 times

(Mobile Format 640px X 960px)
Note: Please click on the Mobile Images to open them in a tab for better viewing!

---

Version B
(Computer Format 1920px X 1080px)

working_versionb_01_home_page_01.png (4.01 MiB) Viewed 455 times

working_versionb_01_sample_page_01.png (29.23 MiB) Viewed 455 times

(Mobile Format 640px X 960px)

[Cole_Richards]

Hi Meghna, these designs are really nice, the first one is my personal favorite, it is very well done, professional coming out the wazoo. The layout and use of color are really well done and I really like the font choices, I might add a bit more navigation to the top, maybe a link to the larger Yale site and different student projects or events. Well done!

[mck775]

I also redesigned Yale and I love your designs! Seeing your other work, you are really good at this whole web design thing Your designs are very user friendly, clean, usable, and amazing composition. Personally, I think both designs are professional and Yale should consider them. My favorite version being B, it's colorful, the elements are scattered but still nearby and unified. The only thing about version b is that there is a lot of negative space in the nav bar with the logo, in both the mobile and desktop. On the one hand it does look very clean but I think there is room to make it busy.

[kpargs]

Hi Meghna,

I personally feel more drawn to version B, it's colorful, airy, and creative. But they both look great, so much work and detail put into these, great job

[Fatkid53]

I think version b really says yale school of art, but both designs are really well conceived and layed out. I think the aside/ dual column layout lends itself to a better organization of the information without having to scroll a lot more. The only thing I think I would look at is the mobile organization, it feels a bit crowded and might prove harder to navigate when condensed. Great designs.

[Elle Barre]

Hi Meghna,
Wow, you did amazing work and an amazing amount of work. Having looked at that Yale site and others like it, it was SO REFRESHING to look at your designs! They conveyed "ART." I love your second, pastel-colored one, it is REALLY appealing and easy to look at and not feel overwhelmed by tangents of information. It's just so easy on the eyes, enjoyable on the eyes, the pastels, the tints. So nicely balanced throughout the site. You got a ton of info IN THERE, on both, but in digestible chunks. So enjoyable to look at them.

[Instructor]

A poll! Alright, you have my attention.

I'm all about Version A. I loves me some of that contrast, baby.

One of the little bits that stands out to me is how the header image shifts based on what page you're on. It's a nice little geographic marker of where you are in the website to subtly aide navigation. Speaking of navigation, I like that you kept the hamburger across both the computer and mobile designs. That's an increasing trend I've seen in web design and from what I can tell there's very little downside. The same reasons why hamburgers are awesome on mobile (more screen real estate freed up) are true for computers as well. Who knew? I also like your layout choice of large colorful headers with a little teaser bit of content encouraging users to scroll down to find out more. That's a fun UI trick and very effective. Great use of Yale's colors throughout. It is a darker website for sure, but that really makes the art and campus images stand out. I'm not usually a fan of mixing sans-serif and serif types but it seems to work laright here.

I really like how the header goes to the edges of your browser window on your mobile version. I think it'd be awesome if it did the same on your computer version. Your footer does and it really visually opens up the layout. You've got a little bit of fragmentation going on in the middle of your computer layout. I'd tighten it up so it's a bit more like the margins of your mobile layout.

BTW, neat idea showing us where the screen cuts off on the two of these. It lets us calculate how many "screens" tall your designs are.

Nicely done!

[Samantha_Thomas]

I think your version A is good cause it focuses on the general needed information while also adding the yale's colors. very neat, very clean, and very professional.
Your version B could also work just as well with the friendly student vibe it gives off;
however, I can not say for sure because, for some reason, my computer is not loading your post and refuses to open your images in a new tab to the complete degree it does others. Sometimes I get blank white sections while having something loaded on top of it with an obvious line of loaded to not loaded.

[lilykmitch]

Hi Megna!
I love version A it looks amazing! It really makes the website look so much more professional, clean, and easy to read. I really think you should go with that one the contrast looks super good too with all of the pictures and graphics you have added in. Awesome job!

[squidgola33]

my personal favorite was version A. I think that your use of space and color are very well used here. I also like the fonts you've used here they flow well and I especially like the font that you used for 'YALE'