Project04: Preliminary!

[Meghna_Misson]

Hey Everyone,
So sorry for posting these late, but here are my roughs for Project04.

For Version 01, I wanted to keep the original navigation that the TMCC site already has because I thought that it would be strange if the page for the graphic design department/program was completely different from all the other pages, so I wanted it to be connected back through the same navigation design alone. The footer, however, will be different since I personally do not like the triangle shape jutting out in the center underneath the white TMCC logo. Additionally, since the format of the text is now closer to the left in the new concept, it will not match quite right with the green shape that sits in the center if I kept it in--so a change was needed! The focus for this composition was to rework what was already on the website and clean it up to be more visually pleasing--overall, trying not to be too extreme since the page still has to inform the viewer about the program.

For Version 02, I wanted to increase the look of the webpage to catch the attention of the viewer as well as to better relate to the visual department. This meant I had to focus less on legibility, but I still tried to keep it here and there by altering the background image and colors; for example, making the white text on top contrast with the dark/grey background behind them. For this concept, I also had wanted to make the dropdowns compacted so that the viewer would not have to scroll forever as they would do for my first version. So, in the "Program Information:" box, the viewer would just need to click on one of the links, for example, "course offerings", and it will display a dropdown with all of the elements inside in that section.

Websites used for Inspiration/Resources:
https://blog.prepscholar.com/best-graph ... -in-the-us
https://www.artcenter.edu/academics/stu ... index.html
https://art.calarts.edu/programs/graphi ... am-faculty
https://www.otis.edu/undergraduate-programs
https://art.calarts.edu/programs/graphic-design/bfa
https://www.newschool.edu/parsons/aas-graphic-design/
https://www.risd.edu/academics/graphic- ... d-research



PLEASE CLICK on the Images to open them up in the new tab for better viewing!

Also the red line crossing each artboard is the visible screen limit, whereas for the computer format it is 1920px and for mobile its 960px (height-wise)

---

VERSION 1

(COMPUTER FORMAT, 1080px X 1920px )

(Homepage)

(Sample Page, Faculty and Staff)

(Section Menu Details)

---
(MOBILE FORMAT, 640px X 960px )

(Homepage)

(Sample Page, Faculty and Staff)

---000---

VERSION 2

(COMPUTER FORMAT, 1080px X 1920px )

(Homepage)

(Sample Page, Faculty and Staff)

---
(MOBILE FORMAT, 640px X 960px )

(Homepage)

(Sample Page, Faculty and Staff)

[kpargs]

Hi Megnha,
I like your concept and detail in design1, but the contrast just makes the second one pop more. Awesome work.

[Fatkid53]

I dig the second version of your roughs, the high contrast colors with the busy but not distracting background really provolks a visual interest. That being said the only thing I could find that I can nitpick is maybe a bit more breathing room for the body copy, it feels like it is a bit over powered by the awesome designs around it. Great designs, I look forward to seeing where you end up with this.

[Ericha Eberhart]

Hi! I like your first design a lot because they feel clean, well organized, but still fun! I really like the large vertical type too it gives good visual flow. I think I would add some imagery relevant to graphic design to pull in the viewer. Nice work!

[Megan Greaves]

I really do like both sets. The first for its structure, the second for its colors and contrast. Although, perhaps the background in the second set is a bit busy.
I think either one of these would be a good choice. Good work.

[Instructor]

I'm ALL about that second design, Meghna.

You employ contrast so well in it, both to highlight things and to move the eye around the document. I especially appreciate the use of the orange as a "fifth" color, drawing the eye to your navigation and along down the composition. It does a great job of saying "hey this is important". The whole layout uses color very well. You've even managed to make the TMCC green look not terrible. Quite a feat! Your typography is pretty neat too. Using different weights, styles, and widths of the same typeface to create visual hierarchy and interest. Your background image is great too. It does a good job of adding visual interest, but it's detail doesn't subtract from your content. You've picked just about the perfect opacity. Great use of margin and padding throughout this thing. Everything has room to breathe and is not crowded. And you've used alignment equally well. Something I don't always see at this level. Good job finding edges. That peak in your footer is a fun little detail. Your navigation is easy to see and use and I have no problem reading your bodycopy.

There's not much I can find wrong here. The only thing would be to even out your margins on your "Program Information" block.

Good work!

[James Hill]

Hello Meghna,
There is alot to unpack with your designs. I like Version 1, I think your designs look like the fit a professional setting and match well with the original design. Great Job with your designs.

[lilykmitch]

Hi meghna
i love your concept two design. The colors and overall layout are amazing and work so well together. Its really easy to navigate and figure out where everything is supposed to be! awesome job!