GRC 175 Learning and Discussion Forum

DESKTOP MOBILE Hey Everybody!

I worked on these all the way until the very last minute. I just couldn't help myself but keep playing around with stuff and tweaking followed by more tweaking followed by more tweaking. The major takeaway I got from the first preliminary was to make the desktop and the mobile more cohesive versus having two different background colors being so opposite that it didn't feel like the same site. Although I did want to keep some differentiation there for my final product, I felt it was better to make the backgrounds slightly different (yet still similar) but maintain that color family cohesion whilst still being some differences (not to mention my style of backgrounds I had to be careful of when bringing to the mobile as it can busy up a small screen real quick).

Another thing I really wanted to do was expand the menus compared to my first sets of layouts. Although the "about me" can work as the first homepage/landing page, I wanted the first screen to feel more branded (or how I would like to brand myself as a designer) and then allow people to access my "about me" page via the navigation. Same thing with my project menu for this class (as well as any future things I may like to add to it later) using drop down menus in the navigation at the top for the "Projects" and "Portfolio" sections. The "About Me" button will take guests to a different page entirely like a normal menu button and the "Contact" button takes people to a pop up screen where they can enter in their name, email and a message (which is then stated that those messages will send to my email which is listed below the form) along with the "Submit" button.

Lastly, just to modernize things a bit, I added social media icons that would link to my corresponding socials, made the about me section a scrollable section, and made sure that whenever a pop up menu or drop down menu came up, the rest of the page would dim slightly so it didn't get too busy. Also, just so there is no confusion, for the mobile when you click the "Projects" or "Portfolio" buttons, they drop down a sub-menu within that menu box. Users can then click those buttons again and the submenu will fold back in on itself, bringing the user back to the main drop down menu (basically a menu within a menu similar to how the navigation works on the desktop version). You can tell when you're in the submenu by the change of direction with the arrow icon next to "Projects" and "Portfolio" (downward arrow indicates an expended submenu downwards and the up arrow indicates that submenu folds back up).

Also, I did change a lot of the graphical elements a bit from my first rough drafts but still stayed in line with that art deco, clean, professional look as well as expended on my logo to create also an icon with the letter “Z” and not just my design/designer title name as Elle had pointed out in our previous critique that Z is such a unique letter and that I should try to play with it for branding/logo purposes. Super stoked with the results of that. Also I went with the about me picture that most people seemed to have gravitated towards the most.

For my inspiration, below are some excellent examples I found of graphic design portfolio websites:

https://www.lottanieminen.com/
http://nolbert.com/
https://willpaterson.design/
https://toyfight.co/what/

Their use of color, fonts, imagery, graphics and organization is so striking, simplistic and modern and that’s essentially the direction I would only dream of being able to take my web design skills to.

Looking forward to seeing all your guys' awesome final layouts over the next week! Hope everyone is having a great semester so far!

Best,
Zach

Hi Zach! These are fantastically done! The look of the website is so unique, the only thing I can compare it to is it looks like the controls for a spaceship, with the colors and line work, its super nice to look at. The layout is easy to read and understand, nothing is taking up too much space. The only comment I have is maybe change the home page of the web layout and make your logo a bit more centered, I see that the navigation comes down there so that might not work as well. Otherwise these look awesome!

I like this one very much, you’re very much ahead of the class. I say high score for high effort!

Zach my dude,

These look so awesome. They're classy and modern. They give me a sci-fi vibe but they also make me think of a really fancy hotel. You have also clearly put a lot of thought into your layout in regards to the actual function of a website and not just the aesthetic design of it, and that's very cool. If there was a way to win at a project I think you've done it. I hope you don't mind if I take inspiration from you.

Your website looks so awesome.
It's all technology feeling, and the dropdowns look fantastic, and it reminds me a lot of Tron with the sense it gives off.
The colors all fit together to tie the mobile and website versions together. It is very excellent. I love it.

Hey Zach,
Wow this project morphed into something really unique and beautiful. I really like what you did. It has some personality, but yes it's still sleek and professional. I like the use of just the Z as well. awesome

Hey Zach,

This is amazing! I like how you went in a whole different direction. It looks high-tech and elegant at the same time! This is really cool! I think you did a good job combining tech with the organization. I also love the color and the drop-down menus. You did an amazing job going above and beyond. I also think your logo is really luxurious. Just WOW!

Woah! This is beautiful and perfect in every way. It really takes one's breath away. I'd been looking at these plates for a few minutes, just gobsmacked at the high art I'm looking at when I realized the big Z's! and remembered my suggestion, idk if someone else also did but then I read you mentioned my name. I am so proud of myself, I feel I have earned an A in this class if I could tell YOU to do something that improved your work! It's as if I told Einstein "have you considered maybe a unified field to all of this?" The big Z's are exactly the right thing to have done, and making it the main part of the mobile version is great, it looks so good. Beautiful design, exquisitely realized, very uniquely you. Yes, I will happily preside over your fan club. Okay, okay, room mother. So good. :- )

Wow, cool, clean, and concise. I really like where you ended up, design-wise, and I think the site has a rad geometric background and the colors work well together. The near midnight blue with the metallic overlay is awesome, and I like the functionality of the site you illustrated. Yours is another site I find it hard to bring up anything negative about, but here goes; the background on the desktop holds the same value as your logo and you might be able to drop the opacity of saturation on the background to achieve that separation and thus rendering another layer of depth on the site as well. Overall just a great design, best of luck moving forward.
James

Hey Zach,
WOW! This looks way different from what you had in the preliminary critique, but that doesn't mean it's a bad thing no! Instead, this looks amazing and extremely professional! (I am also getting the vibe of a video game pause menu from these designs as well haha--such as from the game Spiderman: Miles Morales https://i.ytimg.com/vi/rAexBRwX9k0/maxresdefault.jpg). I love the drop-downs that you had created and how they also keep your home page spacious and minimal! What is my favorite aspect out of these final designs is the "contact" window pop-up, I find this really cool and how the background behind it is dimmed out! (Would love to see if an animation plays out to where it opens up similar to a flower blooming when clicked!). The only things that irk me are: the white rectangle behind your "about me" paragraph and the hamburger menu rotating when clicked in the mobile version; but at the same time I cannot see how else you would have changed them. Overall, amazing work and I can't wait to see how it works when fully developed into a live site!