Project01: Final!

[Meghna_Misson]

Hi everyone,
Here are my final designs for Project01! And here are some websites I had found that helped me improve my concept's design along with all the replies I received from the preliminary critique:
https://www.creativebloq.com/portfolios ... te-4137460
https://fontmeme.com/graffiti-creator/
https://www.wix.com/blog/creative/2020/ ... olio-tips/

After adjusting my website's designs on both the computer- and mobile-sized formats, I believe it now solves the project's goal because it follows the requirements needed, depicts my creative process successfully through to the audience and will link to the rest of my projects later on throughout the rest of this course. As in the handout, I have: my name and one paragraph about myself; at least one image and/or graphic; the course's information; an email address; plenty of room for the next two projects and room for links to extra references and resources that provide useful information.

When reading the first website I had linked above, I found that I was representing my personality well with the photograph of the graffitied wall for my website's background because I enjoy collages most of the time other than anything else, but what limited my character coming through from the screen and towards the viewer was my use of fonts--especially for my name (the headline). Even though the Arial Black serves to be a strong, solid contrast against the busy background, it is usually my comfort typestyle--meaning I use it way too often than I should; it almost comes off boring and unappealing when being used in this setting. So, I wanted to seek out a different typestyle that would fit the rest of the theme that I was generating within the website already--going onto the next site I had listed for inspiration, it had many different graffiti-Esque fonts to choose from. I then played around with some from the website until landing on the font, "Boredsb", which looked similar to some of the text in the photograph. Afterwards, I then created the letters individually and set them to different sizes as well to make it seem that they were actually written on the screen; at the end, I found that this action generated the feeling of playfulness and rebellion which had matched the background perfectly. But the problem I had now with my name was legibility because the font might be too expressive, but it was a quick fix by including my name in the paragraph just below it and making it bold enough to stand out. I then reviewed all the text again and moved onto fixing my graphics.

However, I felt that from the first critique, my first design had all of its buttons and features in order, did not make it difficult for the viewer to navigate through, and provided enough ample space that the design overall would not feel too compact in. So, there are minimal changes to the rest of the website's design since it had shown off well in the preliminary critique, and quality is much more preferred over quantity. At the end, this design is the one that I am the most pleased with and allows me to have a strong foundation to start on before moving into the following projects.

Web Format:

versiona_final_web_01.png (7.66 MiB) Viewed 1060 times

versiona_final_web_02.png (7.49 MiB) Viewed 1060 times

(Mouse cursor is hovering over the "Projects+" tab in the navigation bar; I had kept the simple use of dropdown bars to show the project buttons 2-4 from the preliminary critique).

Mobile Format:

(When the viewer presses on the "+" button in the top right-hand corner, it will cause fly-out navigation to come from the right-hand side depicting the rest of the website's navigation: projects+, references, and other. Behind the fly-out navigation will be a turquoise-colored overlay that will help bring focus to the navigation. The "+" button, when pressed, will then turn into an "x" shape through an animation adobe after effects later on

(When pressing on the "projects+" button, it will drop down to projects 2-4).

[Cole_Richards]

Hi Meghna! These designs are awesome! I love the look of your name in the layout, using a spray paint font to bring the two parts together, the colors are nice and the navigation is really nicely layed out. There is some empty space but it seems to get filled with the navigation and it might take away from the design to cover it too much. Well done!

[Instructor]

Okay this is awesome, Meghna. You took a great design and made it better!

I, uh, tried to move the cursor around on your drop-down menu demo more times than I would like to admit.

As with your preliminary work, the excellence of this entire design can be traced back to the rad background photo. It provides such color and visual texture to this whole composition. But let's not let that subtract from the other great bits of the design. First, it's well framed by your header and footer. Second, typographically it works really well. I'm a sucker for different weights of the same type being used to create hierarchy. And contrasting it with that marker graffiti logo type really works. Third, I like the subtle shadow gradient behind your content. It really pops it out. Fourth, good use of alignments on all edges. It creates a frame where none previously existed. Fifth, contrast. It'd dark where it needs to be and light where it needs to be. Sixth, your navigation is easy to see and use without being overbearing. And your magenta rollover color is eye catching without overshadowing the rest of your colors.

I have no real issues with it other than one stylistic one. I don't think your bodyopy paragraph should be indented, but that's a style choice. Otherwise, I can't find much wrong with it.

Excellent work!

[Mike_Chavez123]

This is something I’d see in the streets or in moving trains called graffiti. I like it, real catchy and artsy.

[zandrews]

Hey there Meghna!

From the preliminary, your layouts were some of those that really stuck out to me - your use of color, spacing and imagery is fantastic here and really shows you put a lot of thought into what you wanted your overall aesthetic to be with your site. I actually pulled some inspiration from you with showing the drop down menus as I think its a fantastic way to illustrate not only the functionality of your site but also frees up the creativity and how you place different elements across your site.

I really love the hand drawn style to your name as it ties so well to the background and as a logo, there's tons of potential there as the graffiti artsy style is so adaptable to whatever type of project your working on. Also, you can never go wrong with hot pink, black and white as they all work very well together and the thing I think your layout does so well is it's playful and full of energy whilst still having a very clean, professional look to it. Your drop down menus for instance are very well spaced and made. Desktop is pretty much flawless (would even say perfect but I try not to ever say that as I think there is always room for experimentation and expansion).

Same for your mobile version - you killed it on the navigation pulling out from the right and taking up half the screen, allowing room for animation when the sub menus open up and scoot the other buttons downward. Definitely tasking note of how you did that in case mine needs some reworking. My only little teensy tiny critique would be your name logo is just a tad hard to read when it comes to the "H" in "MEGHNA" as it could be mistake for an A as the mind tends to start reading your name as "MEGAN" BUT thats a very small nitpick as your name is stated in clear text right below that. However just something to note in case you ever use that name design by itself.

Overall these layouts are very well thought out and also nice touch adding a cursor in there as well as a touch screen indicator for the mobile version. Really adds to the functionality demonstration without animation being involved. Cant wait to see you build this out and make it come alive! Fantastic job!

[Samantha_Thomas]

Hi Megha

Your street art website is charming and looks even better now than it did during the preliminary. I am curious how you will get all the drop-down and sidebar menus to work correctly as I know it can be very complicated in coding to do that sometimes, but excellent job. I look forward to your website ending and getting it to work. It'll entertain my brain for a good 10 minutes just to play with the drop-down menus because I'm just special like that. Good work.

[Megan Greaves]

Hello Meghna,

I liked the graffiti design from preliminary but this really takes it another step further. The typestyle and the effort you put into really making it your own paid off. It fits in so well with the rest of the design while still popping off the black behind it so doesn't become lost in the design. The layout itself is simple and easily navigated, leaving those design elements to stand out. The dropdown menus are a good choice, and I look forward to seeing the little animations that you will use on the mobile versions. Just noticed the cursor in the desktop demo! Very clever.

[yenny]

Hey Meghna,

I really the final product! It's so cool and I love it! The graffiti font for your name is genius! I really love the aesthetic and the color just wow! Everything looks cohesive and well put together! The theme is amazing! I love the organization. This is really well done there's nothing I would even change!

[Elle Barre]

Hello Meghna,
I don't remember exactly your original, but I do remember that I could not make out what plane of the composition the round pink figure was; it was not clear to me it was a paint-over: graffiti-on-graffiti, but in these pictures, I can tell immediately. What's different? Did you add shading of some kind on the pink guy? Or maybe it's simply zoomed in, and I can see the texture of the wall better. It's a fun design, the fly-out is a great way to save room on the splash page for the ART, and to keep text from fighting with the words written there in graffiti . I have the same thoughts about your name though: it is still difficult for me to see past the "Meghan" in it, and I am not dyslexic: it's just unclear. Your last name, also, is so close to being "mission," and it's a strain to have to look closer to figure out why does "Meghan Mission" which is what it looks like at first glance, and first glance may be all you get, look a little off? It's frustrating. So much so, I feel obligated to say, that I gave up trying. If you at least made both your first and last name in clear, upper and lower case, it would do a world of good to clarity about WHO is behind this beautiful work: Meghna Misson. Even in this typeface, it is clearer than MEGHNA MISSON. :- )

[kpargs]

Hi Meghna,
I love love love it, just keep exploring it, I think you've got a good eye.