Hey everyone! Hope you're all having a great semester so far!
These are my two sets of homepage mockups for project one (desktop followed by mobile for each set). I tried to keep both the desktop and mobile version looking cohesive/similar with style, art and typography whilst playing around with the placement of buttons, text, logo, and imagery. I am a fan of the modern, contemporary aesthetic but tried to make both sets feel different in their own way.
I got my inspiration from the following designer portfolio sites as I like how simple, sophisticated and easy they are to navigate whilst giving the designer's aesthetic of who they are as a person and as a designer which is what I tried to convey within my own layout and designs:
Obviously both of those inspirational examples have very advanced animation techniques incorporated into them as well (which I love motion graphics as that is the graphics track I am on). Hopefully someday when I'm grown up I can create a website like those. Let me know your thoughts and looking forward to looking through all of your guys' this week!
Hi Zachary! These designs are beautifully done, I enjoy both of them a ton, they are visually interesting and unique and really draw the eye in. For your first concept I would make the desktop the same color and same with the text, I really enjoy how that looks in the mobile version, you used the space well while keeping it from being crowded. The navigation could use some work, you could pull the navigation from the second one into the first and I think it would work really well. I think a combination of these two is the perfect place, the typography in the second is beautiful and I would definitely use it. Really well done!
Hellooo
Your designs are very cool but seem to be quite similar in terms of colors. It's a little hard to compare them like that for me, but I will attempt.
Your first design is very cool with the forest-themed branches in the background, but it's a bit hard to connect the mobile and web versions since one has a white background and one has a darker background. At first, I thought they were two different designs until I scrolled down more and saw your second design set. However, I do like the layout of both of them, and how unique it is to most websites we visit nowadays.
On the other side, you have one that gives me mountain vibes, but I don't see the mountain in the mobile version of it. I can tell they are more related than the first because of the colors and the mobile version is simpler. Maybe you could put a cool tan mountain or tan thing in your mobile version like what's on the web version.
Hi Zach,
I like your sleek professionalism on these roughs. Their calming and approachable, they also feel pretty "grown up" so you're killing it. I think you could run with either one of these, I would keep the mobile and web design background color the same, I think there's other aspects of the design you can change and tinker with. Awesome job.
I almost couldn't pick between the two, they both look so nice. I think I might prefer the second set because of those lovely colors, but they both have a wonderful texture. Both designs are well organized and have a clear hierarchy.
The only thing I would do is switch the colors in the mobile versions to make them match their desktop counterparts a little better, and those gold cutting through the body copy on the mobile version of the dark colors design might make the words a bit hard to read. But wow, these are so good. I don't think there really is much you can do to improve these.
Hey Zach,
I really adore your first concept the best, I just love how the website's background color changes from a dark hue to a lighter one when the format is changed (computer-sized to mobile). I feel like you can make it transition between the two as a gradient animation later on through adobe after effects or through any other motion graphics software. I also do enjoy the buttons being placed on the left and your "about me" section on the right, but I think what disrupts this layout is that your name is on the left too--the reason why this confuses me is that I can not really pair your name up with your paragraph and photo since it is on the left with all the buttons. A simple change you can do to solve this is by moving your name above the paragraph and photo--near the top right corner of the screen--and move the list of buttons accordingly to fill in the missing gap.
Besides that, I think you're all set! Great designs!
Hi Zach!
I love both of these concepts they look super clean and professional and have a nice theme to them, they almost look like the type of website you would expect for a wedding photographer just super elegant and nice. My favorite of the two would be the second one just based on the layout of the desktop one. I like the navigation bar at the top so it isn't along the side kind of clashing against your body copy so maybe if you did something like that in the mobile version too that would look nice! I think that's one of the only things I would do differently. I really like the elements you have added especially the geometric pattern in your first concept and the typography you chose for the second one fits really nicely too.
I like your first layout best, mainly because I like that photo better, such a handsome fella, and the pc version over the mobile version is preferable colors-wise, though the big photo is very nice in the mobile. I think you could make it bigger in the pc version with very little alterations of other elements and it would look great, maybe crop off some of the left side of the photo--but then you can't see the 'guns'. :- ) #1 appeals on several fronts, including putting your bio front and center, big, so you really can't avoid reading it. In the other versions, I don't love that all the bio copy is done in a serif font, though I LOVE Times New Roman for everything in life, generally, and yours works in No.1 because it's so big and legible that way. Maybe if you gave them more leading room in the smaller versions, it would be easier to read (for me). I think your name should be in a different font or somehow set apart from 'Design' with color or something. That headline font in #1: the negative space between Zachary and James calls for some kerning closer I think. This font makes your names set apart from each other, compared to how your name and 'design' are set apart. HOME and ABOUT ME are not on the same horizontal line, and I think it would look better if they were closer to it, even if you have to shrink the nav words, or decrease leading between them. I love leading. Do we need "Home" on the Home page? I didn't even use real nav words, just fun place holders. :- )
The 2nd set---I like the dark background, the nav list is nicely legible, though I think the 'box' they're in should have the same upper edge as the photo.
The headline font is actually hard to decipher... the Z (F?) of Zachary, the J (D?) of James, and the whole word 'Design' is illegible to me in that font. With such a great name as Zachary, I don't know how you can resist making a big scene with the Z. It's still 'different' (I do have a nephew Zachary, who doesn't nowadays, but any name starting with Z has a visual advantage I think you should jump on.) That grif studios website you like is very impressive, very Hollywood, maybe OVER DONE, really, but, definitely artsy and gorgeous. It's amazing how graphic designers get to take the credit for these astounding effects that are packaged into the adobe software. But once you've seen anything done in one of them, it makes all the rest that you see after that seem trite. Like, Dude, we know now that YOU did not create that "paintbrush of flowers." Quit acting like you're a genius: your drew a line and Adobe drew a hanging garden there. Do I seem bitter? Haha. I'm just noting things.
Nicely done, Zach. You have two pretty strong designs here. I like your first design a little better.
Specifically, I'm fascinated by the differing background images between your mobile and your computer layouts. Your images both have a kintsugi quality to them, very gold in the cracks kind of deal. I like the way the differing background images alter the contrast of the layout. Your mobile layout almost looks like a book jacket with your author bio on it. Lol! Both contrasts work well. The white and the gold and the warm gray of the computer layout give a different feel to the white and the gold and the green of your mobile version. Good color choices on both. You've found good colors to work with the gold on both. They type is easy to read on both. And the navigation is easy to see and use on both.
The biggest issue that I see is one of bodycopy margins. On your computer design, the right edge is too close to your pic. And on your mobile design, the top and bottom margins on your bodycopy is way too tight. I'd recommend opening them up to something like the dimensions between your logo, nav, and pic. Make sure the bottom edge of your logo matches the baseline of your copyright type on your mobile version
Good work!
"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
Zach,
I really like your first design, but the darker toned color. I feel like the font and colors are great, as well as the geometric gold design that's in there as well. I think these are very strong! the second set you posted are also very good but the mobile version I feel could be spaced out more thoughtfully it seems a bit crowded and chunky.
