GRC 175 Learning and Discussion Forum

these are the two layouts that I have
the cat with sunglasses picture is only temporary, as well as the body paragraph about myself. As this time around, I'm more focused on the design and colors than what is in it precisely, as I can make minor changes depending on the feedback I get.

Inspired websites:
https://w3layouts.com/template/modern-c ... -template/
https://w3layouts.com/template/dreativi ... -template/
https://w3layouts.com/template/creative ... -template/
https://w3layouts.com/template/politics ... -template/

In terms of inspiration, I looked at random pictures of websites online that could fit what I wanted to do and took bits and pieces from each that I liked and put them together to make something I could call my own. but those are 4 I think I mainly used if memory served me correctly (I forgot to save which ones it was. oops)

The first group of roughs mainly follows the idea of dark mode since it is easier on the eyes and doesn't hurt as much with a more complex design.

The second I wanted to make it simpler with lots of colors since my last one was on the darker side of things, and my friends know me very well for being happy and bubbly.

Hi Samantha!

I love your layouts (I mean who could not love your cat images as they're hilariously awesome)! Each of your layouts I like for very different reasons (besides the cat of course) as I really am drawn to your color choice for your first layout but your second's organization is fantastic. I especially like and am taking notes on how you condensed your menu buttons to something smaller/simpler on the mobile versions for both. In terms of the desktop versions, I think option 2 does a really good job having the menu on the left as it gives the homepage content room to breath and not feel stacked where as option 1, just as a suggestion, perhaps move menu buttons to the top? You could even perhaps explore your color choice for option 1 and apply it to option 2. Great job on both of these though - they're super fun and totally put a smile on my face which seems to be a success per your personality!

Hi Samantha, these concepts are really well done, they're unique and visually unique. I am leaning towards the second concept in terms of the layout. The picture in the mobile design is pretty squished so maybe if you lower the size of the text then the picture could fit there, I am not completely sold on the script font for that concept, maybe just a nice Sans Serif would look really nice and clean there to balance out the font for your name, The background is cool as well, the gradient gives off a 1960s/70s vibe which I am digging. Really well done!

OF COURSE SOMEONE WOULD MAKE A POLL. It never fails. Congrats on being the first poll-person, Samantha. However, your poll is flawed. You were missing my option, "dark mode with a night kitty pic."

So, I'm all about that dark mode. The black, teal, and purple work well together. I like your use of gradients. It gives the content area a transparent glass feeling and the inverted gradients around the edge make it looks like it's either thick glass or it has been carved and mounted. Your navigation is easy to see and use. I like the way it collapses on the mobile version. Your headline type is interesting and adds additional visual texture to this design. Good use of margin throughout. Everything has room to breathe.

It has a couple of flaws though. First, and he most glaring, is that the bodycopy is just about illegible. I'd highly recommend swapping it out for a more traditional sans-serif font and swap your headline font into your buttons. Also, no all caps type in bodycopy. It reads as shouty. Second is that you vertically squished your kitty image. Don't squish kitty! Third is that this is the wrong kitty pic. Dark mode is not for day kitties. Your dark mode should have a cool night kitty.

Good work!

Heh, butts.com.

Hi Samantha,
I dig the dark mode. I also like squished kittah, its like jaba kitteh. But also I read your disclaimer, so I get it. I like your gradient work as well. Can't wait to see what images end up here. cool job.

Hey Samantha,
Both of these concepts are really good! I also love how you wanted to make a dark version in consideration for those who need to look at a computer screen but have a hard time seeing past the brightness of a normal light mode one--I'm sure Elle would greatly appreciate it! Because of this, the first concept has got to be my favorite! I also enjoy how the photo is placed on the bottom of the site like a footer, it comes off as a unique form of placement and grabs my interest. Even though you mentioned that the cat photo is only temporary for right now, I can't wait to see what you will replace it with. As for the rest of my critiques, I recommend using one or two more fonts to establish some hierarchy and contrast within the composition, it appears that all of the text elements are using the same font. Another change would be decreasing the size of your introduction paragraph, additionally due to the condensed font, it is difficult to read and puts off the viewer from reading it--same as my previous sentence, try changing the font for the paragraph to something more spacious and legible; also, the rectangle behind the paragraph does not need to be filled up entirely with text--white space is your friend! Other than that, your designs are starting off really strong for this project! I can't wait to see how you revised them to match up more with your views!

Samantha, I love your color palettes, both sets. Love the dark background on the top one, but, the bottom set is so pleasing, it wins out!

The dark design:
It hits me as very s-t-r-e-t-c-h-e-d out horizontally, not just the cat being distorted, but also the background horizontal blocks and the wide-set nav buttons, and wide 'about you' block. I think maybe tuck them in a little tighter, and align your edges on the TMCC button on R and your name button on L with the R-L edges of the outside nav buttons. That TMCC block is kind of floating out there on its own. I like the shadow--is that 'inner shadow", is there such a thing? It looks good, and you reversed the effect on each of those blocks: that looks really good. That font in the copy is tough... but nice in the nav buttons and TMCC thing (though the font is so tiny in the grc line)

The light design:
I love it all, love the font in your name and etc., love the colors, it's really easy to absorb the entire thing with no eye strain. If nothing else, my monocular vision can be a canary in the coal mine on 'viewability' (Trademark) haha.
In the pc view, the vertical nav bar looks so good, it breaks up the width nicely. I like the drop shadows though are they all the same color?
In the mobile format, this looks good too, with exception being the font, placement and size of the TMCC and GRC lines, and drop-shadow size and color not being consistent is confusing. I don't think the drop shadow should contain information... Love the colors.

I think this is a good start. I feel your images of the cat aren't entirely scaled properly so it kind of throws off the flow of the layout. the dark background makes the font fairly hard to read and the gradient when it gets lighter makes it even more difficult on the first design you have. the second design somewhat reminds me of a video game Home Screen I'm not sure if that's what you were going for but I think it looks pretty cool! I feel your second set of designs are your strongest.

I would have to say the second design feels like it jives with your kitty image best, but the misalignments in the section boxes drives my eyes a lil wacky. The first I would say has great contrast and color scheme but the readability with the high midline fonts is hard to decipher and doesn't really work with the colors of the kitty pic. Well not unless it's a space kitty or the ultimate 80's kitty, it could be. The second composition seems to carry your theme all the way through and is clear and concise. Good luck and I hope to see how you finish your design.
Regards

Hello kitty! I like the Tammy cat, makes me smile with glasses. I’d look for more images of other felines.