Project01, Prelims!

[Meghna_Misson]

Hi everyone!
Here are my roughs for Project 01!

And here are also two websites that I found inspirational while trying to figure out my design's composition and layout for this assignment:
With the website, https://www.eunjeongyoo.com, I enjoyed how the designer had placed their illustrations on the homepage and additionally made them huge to catch the interest of the viewer. I thought it wonderfully showcased the artist's work and immediately made their skill visible to any potential client when clicking onto their online portfolio for the first time ever. This idea then made me focus on creating a composition where my website's background would primarily be composed of a photo or a set of photos to visually engage with the viewer as well. (Another website that served as inspiration for this same idea is https://www.joifulton.com, their layout is much more organized and also generates a strong connection between the artist and their work on screen; when checking out this portfolio for the first time, the term tech-savvy came across my mind because of their ability to work in Blender--a computer program used for creating 3D graphics--so now I know if I ever wanted to have something made in 3D I could commission this artist based on their skill and previous work as seen on their website). However, I couldn't accomplish the same feat since I don't have a consistent set of graphic design work that I could use, so instead, I settled on a photo I took a while back for my photography class (VersionA). If this design is the one I choose to develop further on for the final submission, I might make the photo in the background scrollable like a photo gallery, where the viewer could scroll through additional photos horizontally and make the website much more engaging.

The second website is https://happyholidays.myportfolio.com. What got me hooked on citing this website as another source of inspiration is the interactive elements on the screen. For example, in the mobile format, the three-bar button near the top left corner switches to an "x" when being clicked on while seeing the website's extra pages--home, mailing, shop, etc.; another example is when you hover your mouse over the images underneath the image in the header while viewing the website in the computer-sized format and they zoom in. I find these little features fun and playfully, and greatly increase the immersion between the viewer and the website. This website alone mainly inspired my mobile formats for both concepts, as you will see below.

Extra websites that I used for inspiration and for general website tips:
https://www.ariesmoross.com
https://happyholidays.myportfolio.com
https://stephbulante.com
https://www.pixpa.com/blog/preview/?ur ... pixpa.com/
https://www.wix.com/blog/2017/10/5-des ... onal-site/
https://andrewcouldwell.medium.com/tips ... 7e063e8371
https://99designs.com/blog/web-digital ... sign-tips/
https://www.spinxdigital.com/blog/top- ... igns-2020/

Version A
As explained earlier in the first paragraph above, I decided to use a photo I took when exploring an old train tunnel for my photography class at TMCC. The wall in this photo was very colorful and had a collage effect that I favor the most whenever creating fine art in my free time. So, I wanted to incorporate this picture not only to satisfy the desire to make a single image the entire backdrop for my website but also because it adds more personality and lets the viewer know what my interests are when thinking about design and graphic art. I then emphasized the vibrancy of the photo by darkening the navigation and borders around it, which had helped the white text on top not get lost to the busy background. In the end, I am satisfied with the design because it comes off as a mix between grunge and modernism, and has a good balance of expressionism and legibility.

graffiti_design_web_01.png (7.34 MiB) Viewed 1302 times

graffiti_design_web_02.png (7.17 MiB) Viewed 1302 times

(Projects Button is clicked/highlighted, additional pages drop down featuring Projects 2-4).

(Projects Button is clicked, additional pages drop down featuring Projects 2-4).

Version B
For this concept, I wanted to create a layout that had more white space established in order to make it appear visually soothing--in a sense, airy within the contents on screen--and not so much cluttered as in Version A with the graffiti and debris. I had used the color generator, https://coolors.co to come up with a color scheme that had natural hues that would continue this feeling of being able to breathe while immersing in the website. My plan originally was to create a vectorized illustration for the backdrop, but I soon figured out that having a realistic photo again would make the backdrop appear not so much plain in taste. Shortly, I came across a photograph of a tree branch with brightly-yellow-colored leaves and positioned them in the frame; the yellow matched perfectly with the color scheme I already had so I continued forward with creating graphics alongside the picture to balance out the rest of the composition. After fixing up the backdrop, I adjusted everything accordingly so there would be no conflict between the required text and visual elements. Although, I can't figure out the perfect spot to place my email addresses.

yellow_leaves_web_01.png (3.65 MiB) Viewed 1302 times

yellow_leaves_web_02.png (3.75 MiB) Viewed 1302 times

(Projects Button is clicked/highlighted, additional pages drop down featuring Projects 2-4).

(Projects Button is clicked, additional pages drop down featuring Projects 2-4).

[Cole_Richards]

Hi Meghna, these concepts are absolutely wonderful! I love both of them a ton, the first one is inspired for lack of a better term, using that photo as the centerpiece and then the rest flowing around it is really well done. You could tie the picture and the text together if you maybe used a graffiti-esque font for your name or the title, and I see you pulled a color for the rollover navigation but you could take it a step further and have one of the colors in the picture as the color of some of the text, like your name for example. There is a bit of empty space that could be remedied with bringing some of the text down. The second concept is also really well done, I love the picture and the choice of shapes is great. I might change the typeface for your name and the normal navigation, I personally don't think that font works with the other but that's personal preference, it might also look good if you made the type white instead of black to make it a bit brighter and lighter if that makes sense. Other than that these are really great concepts, can't wait to see what you make of them!

[kpargs]

Hey Meghna,
I appreciate how much effort you put into both of your designs. I like them both, but I would vote to keep working on your first layout and concept. It's a photo you took, and you said that its similar to the collage art you like to do, so I think it just makes sense to use all these concepts and pieces that are closer to the true you, and what you like to do.
Kirsten

[lilykmitch]

Hi Megna!
I really like both of these concepts my favorite one would have to be the first one though. I think it really represents your other work and shows your style with the graffiti. Most of your other work has bright interesting colors and a cool style of art in your drawings and graffiti shows more into the fine art side of your work. Another thing I like is the drop-down bars you brought into your design for the buttons. I agree with one of the other comments on here that maybe you could make your name a more graffiti-like font but I think keeping it big white and bold is great to keep it popping off the page with the busier background. I really like the layouts for the desktop and mobile version especially in the mobile where you put the + to show where the navigation is since you are more limited on space.
Awesome job I love it!!

[Elle Barre]

Meghna...

I love your color scheme. Such an interesting name, I would like to see it have an interesting font, and where your first name isn't 'bigger' than your last name. Also, in English, Megan/Meghan is such a common name for women. I look at it and think, oh, you typoed your own name. Your name IS an anagram for Meghan! Maybe a visually interesting pronunciation key? Sorry! But, maybe you could make that look cool, AND, add a memory tool for your site/s in general?

All of your layouts put titles and copy elements too close to the edges for me... I think those should all be pushed in, down and up a little, all away from the nearest edges, and contrast is not good on the contact stuff (oops I forgot that part on mine) and the TMCC stuff. I like the color mix, generally, but I am not captivated by the image... it's a thing with two eyes, I can make that out, but so vaguely. What it is and where it is... floating over a visually interesting collage of finer graffiti and also a papier mache looking part, but those are not like the thing, whatever it is. Am I blind? Maybe it's clear to others. As I look harder and harder, I see that it's depicting how someone ruined the graffiti wall of great-looking art with the pink thing, still dripping. I apologize if this is actually a piece of your art. I am not the best critique-er of this style of art, so take my bit with a big grain of salt. I love the colors, the papier mache bit and the background graffiti, if it's any consolation.

[Instructor]

Oh I'm ALL about that first design, Meghna.

That first one is so vibrant and has such an edge to it. That's laid 100% at the feet of your awesome photograph. Great choice on that one. It does all the heavy lifting in terms of color. I like the way you built your design completely around it. Great use of shadows and gradients to fill in the "website stuff". It's really a very simple layout that is made fascinating by a great image and excellent uses of transparency. It should be easy to build when the time comes to "make it real". Good typographic choices, too. I like the use of different weights to establish hierarchy. All of it is very legible as well. Your navigation is easy to see and use and vanishes nicely into your dark gradient at the top. I like the "+" to let us know where your dropdown menu is. Great semi-transparent header and footer on your mobile version, they really frame the whole composition. Thanks for doing the nav previews as well. They add to the scope of this thing.

I don't know that the first line in your bodydopy paragraph needs to be indented or that your "Thank you ..." line needs to be centered. I'd recommend left aligning both of them.

Great work!

[Samantha_Thomas]

I love both of your designs, and I love the idea of a drop-down tab and sidebar tab for the mobile versions.

Not only does it leave more room for the person to see your picture or read your bio without getting distracted, but it also makes it neat and easy to add on to when you feel the need to make adjustments to the main page or just simply the tab. Like if you were to add more projects in the future or something.

I would go with your first design as the yellow and orange in your second one is nice, but it can be a terror on the eyes if you stare at them all day.
Pluss, I just like the chill mood of the first one with all its dark, cool colors. I would visit this site constantly if it were a game website.

[Fatkid53]

I really like the first design you posted not only because it has a great balance in the composition but because when I was doing my BFA up at SNC i took some rad drone footage of the same tunnels up in Donner. The color scheme pops and creates great visual interest without drowning out the function of the website. I like that you used a found subject to express yourself, it stands apart from the other design which seems a bit more generic in comparison. The second design is also awesome but doesn't radiate the personality that the first does and I am very excited to see where this goes.
Regards

[squidgola33]

I really love the graffiti piece the best. this color scheme and aesthetic is one of my favorites, I really like the use of space you used and how to image is across the right portion of the page and the left is open for you type. I really think you have a great start here! the mobile version you posted is very good as well except I think that pinkish hue should remain throughout the design, its sort of a blue hue and doesn't entirely match the piece.

[Mike_Chavez123]

Very cool, pink and black. I like the text layout and coloring design. I’d revise the four until one pulls out the strongest. Looks good!