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)
(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)
(Mobile Format 640px X 960px)
Preliminary Work for Project 03!
- Meghna_Misson
- Posts: 114
- Joined: Mon Jan 25, 2021 10:37 am
Preliminary Work for Project 03!
Meghna Misson - student
-
- Posts: 87
- Joined: Sun Jan 23, 2022 2:42 pm
Re: Preliminary Work for Project 03!
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!
Cole Richards (Betes Boy)
Re: Preliminary Work for Project 03!
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.
Re: Preliminary Work for Project 03!
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
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
Aloha --------------Kirsten Pargas
Re: Preliminary Work for Project 03!
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.
James P. Cowan
-
- Posts: 97
- Joined: Sun Jan 23, 2022 11:59 pm
Re: Preliminary Work for Project 03!
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.
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.
~ Elle Barre
- Instructor
- Site Admin
- Posts: 1869
- Joined: Thu Jul 21, 2011 8:51 am
Re: Preliminary Work for Project 03!
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!
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!
"Inspiration is for amateurs. The rest of us just show up and get to work." — Chuck Close
Michael Ganschow-Green - GRC 175 Instructor
mganschow@tmcc.edu | 673-8200 ext.5-2173
Michael Ganschow-Green - GRC 175 Instructor
mganschow@tmcc.edu | 673-8200 ext.5-2173
-
- Posts: 90
- Joined: Mon Jan 24, 2022 3:17 pm
Re: Preliminary Work for Project 03!
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.
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.
Samantha Thomas
-
- Posts: 99
- Joined: Mon Jan 24, 2022 11:49 pm
Re: Preliminary Work for Project 03!
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!
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!
Lily Mitchell
-
- Posts: 74
- Joined: Wed Jan 26, 2022 5:56 pm
Re: Preliminary Work for Project 03!
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'