Project01 Preliminary Critique! Take a Look!
Posted: Tue Feb 09, 2021 7:42 pm
Hi everyone,
So sorry for posting late, but here are my roughs for the preliminary critique today! (See Below)
Additionally, here are the two websites that I was inspired by the most:
https://www.moragmyerscough.com , https://www.katemoross.com.
The reason why I had found these websites as being the most inspirational to me is because of their use of pastel/bright color schemes and simplistic design. I also enjoyed how both websites used black and blocky text to make their name and pages contrast more and pop out against the backdrop color. As you can see, these two websites heavily influenced my first rough design, while the other two gone away from it to test different types of color schemes and layouts (serving to myself as a guideline to stay away from in order to come up with a unique approach). Below every picture is an explanation of how these roughs came to be and what program they were created in. Thank you for reading through in advance!
For this rough design, I had started out by sketching small thumbnails of how I would want my layout to appear while viewing the two websites listed above and much more such as Adobe portfolios and other graphic designer websites. Once I finalized the thumbnails, I soon created the necessary files in Adobe Illustrator since I imagined that it would make it easier for myself to align the text, shapes, and images rather than using another program. Before getting straight into it, I wanted a color scheme similar to these websites but did not know where to start. Luckily, I remembered this color scheme generator, https://coolors.co, and had used it for all of my roughs. Once I found the perfect set of colors to create a mystic/magicial setting that seemed similar to the solid pink color used in the websites above, I then went onto Unsplash.com to find a photo that could serve as a possible backdrop for the required imagery. This is where the photo of the purple-ish mountains came to be in this rough since the majority of its colors matched very well to my set of pastel colors. From there on, I worked on this rough design until it came to be as it looks now in this attached image. Additionally, I included the computer's mouse hovering over one of the projects to specify how it would look like once selected.
This design connects with the one above, but was created differently due to the different screen size. In this photo, similar to the computer mouse hovering over the selected item, I placed a somewhat-transparent circle to demonstrate the user pressing down on project03 with their finger to select it. Again, the color of the text changes and a star shape appears to help convey the message that the page was selected.
For this rough design, I had again used Adobe Illustrator and the color scheme generator. As I had explained earlier, I wanted to try something different with my layout and overall appearance that would contrast heavily against what I had seen while researching. In the end, I personally think it seems very creative but not what I was exactly going for in my head. However, if I change the backdrop image to something else, but still within the color group I had established, then I would find this design better suiting for this project. Just as I did for the first rough design, I had placed a temporary mouse icon hovering over the projects tab, which then drops down a list of the four projects. However, for the mobile rough design, I had not placed the visible tabs and instead only left a search bar and a plus sign. Once the user selects the plus sign, a fly-out navigation will appear that will then display the different tab options; I found that this provides more space on the home page and keeps everything organized since the screen size is now smaller compared to the computer screen size.
And lastly, for this rough design, I had used Adobe Illustrator, the color scheme generator, and Unsplash.com. This was originally my first rough design that I had created for this project in order to get a feel for how I wanted to set up the layout for both the computer and mobile version before moving onto the pink rough design on the top with alterations. The imagery used in this rough design particularly is meant to describe myself much more towards the viewer since I love the rain and cold weather. With this design, I hope to include other small images floating around that allows an inside look about myself and career that the viewer could be interested in so that they are more motivated to continue through exploring my website.
So sorry for posting late, but here are my roughs for the preliminary critique today! (See Below)
Additionally, here are the two websites that I was inspired by the most:
https://www.moragmyerscough.com , https://www.katemoross.com.
The reason why I had found these websites as being the most inspirational to me is because of their use of pastel/bright color schemes and simplistic design. I also enjoyed how both websites used black and blocky text to make their name and pages contrast more and pop out against the backdrop color. As you can see, these two websites heavily influenced my first rough design, while the other two gone away from it to test different types of color schemes and layouts (serving to myself as a guideline to stay away from in order to come up with a unique approach). Below every picture is an explanation of how these roughs came to be and what program they were created in. Thank you for reading through in advance!
For this rough design, I had started out by sketching small thumbnails of how I would want my layout to appear while viewing the two websites listed above and much more such as Adobe portfolios and other graphic designer websites. Once I finalized the thumbnails, I soon created the necessary files in Adobe Illustrator since I imagined that it would make it easier for myself to align the text, shapes, and images rather than using another program. Before getting straight into it, I wanted a color scheme similar to these websites but did not know where to start. Luckily, I remembered this color scheme generator, https://coolors.co, and had used it for all of my roughs. Once I found the perfect set of colors to create a mystic/magicial setting that seemed similar to the solid pink color used in the websites above, I then went onto Unsplash.com to find a photo that could serve as a possible backdrop for the required imagery. This is where the photo of the purple-ish mountains came to be in this rough since the majority of its colors matched very well to my set of pastel colors. From there on, I worked on this rough design until it came to be as it looks now in this attached image. Additionally, I included the computer's mouse hovering over one of the projects to specify how it would look like once selected.
This design connects with the one above, but was created differently due to the different screen size. In this photo, similar to the computer mouse hovering over the selected item, I placed a somewhat-transparent circle to demonstrate the user pressing down on project03 with their finger to select it. Again, the color of the text changes and a star shape appears to help convey the message that the page was selected.
For this rough design, I had again used Adobe Illustrator and the color scheme generator. As I had explained earlier, I wanted to try something different with my layout and overall appearance that would contrast heavily against what I had seen while researching. In the end, I personally think it seems very creative but not what I was exactly going for in my head. However, if I change the backdrop image to something else, but still within the color group I had established, then I would find this design better suiting for this project. Just as I did for the first rough design, I had placed a temporary mouse icon hovering over the projects tab, which then drops down a list of the four projects. However, for the mobile rough design, I had not placed the visible tabs and instead only left a search bar and a plus sign. Once the user selects the plus sign, a fly-out navigation will appear that will then display the different tab options; I found that this provides more space on the home page and keeps everything organized since the screen size is now smaller compared to the computer screen size.
And lastly, for this rough design, I had used Adobe Illustrator, the color scheme generator, and Unsplash.com. This was originally my first rough design that I had created for this project in order to get a feel for how I wanted to set up the layout for both the computer and mobile version before moving onto the pink rough design on the top with alterations. The imagery used in this rough design particularly is meant to describe myself much more towards the viewer since I love the rain and cold weather. With this design, I hope to include other small images floating around that allows an inside look about myself and career that the viewer could be interested in so that they are more motivated to continue through exploring my website.