Project01, Final Designs
Posted: Fri Feb 26, 2021 11:33 pm
Hi everyone,
Here are my final designs for Project01. For these, I decided to use a different layout, main image, and color scheme that were completely different from my first three roughs shown in the first preliminary critique, however I had used the same elements from all of them to incorporate into this final design's structure.
For the layout of my website on the computer screen, I was mainly inspired from an image of a website for the popular video game, Call of Duty, (which can be found here: https://blog.hubspot.com/marketing/grap ... -portfolio, underneath "Mingfei Yang"), since it had all the required text placed to one side while the main image and the title were on the other--balancing out the two. Although, this had proved to be some challenge because I had my name scaled down and placed to the right, which did not even out my image on the bottom right. To fix that, I had placed the social media icons on the bottom right corner along with my bio description near the top right. This way, it did not make the overall look of the website to appear teeter-tottering onto the left side more than the right.
Another detail that I had included into this design for the computer screen version was the gray dashed line joining the pages together; this was mainly inspired from a infographic about the music artist, Chance the Rapper, after researching for reference images for another project. I liked how it had interlinked the topics together that was not too bold and not too hard to see, so I thought it would be best to mimic the graphic element onto this design.
One more website that had inspired me on this process, especially for the mobile version of my website, was https://www.wix.com/blog/2020/02/mobile-website/, which had numerous amounts of different websites created for mobile. While scrolling though, it had reminded me of the process for designing apps--that since the website was now on a smaller screen, the information will have to be scaled down and some text will need to be placed on additional pages in order to not overcomplicate the design of the homepage. So now when the next project calls for us to make our mobile version workable, the user will be taken to another page holding the information they wanted after having clicked the page name associated (for example: click on "projects>redirects you to another page listing. all four projects>clicks on one specific project out of that list>now redirected to the page holding the necessary content of that assignment).
Here are my final designs for Project01. For these, I decided to use a different layout, main image, and color scheme that were completely different from my first three roughs shown in the first preliminary critique, however I had used the same elements from all of them to incorporate into this final design's structure.
For the layout of my website on the computer screen, I was mainly inspired from an image of a website for the popular video game, Call of Duty, (which can be found here: https://blog.hubspot.com/marketing/grap ... -portfolio, underneath "Mingfei Yang"), since it had all the required text placed to one side while the main image and the title were on the other--balancing out the two. Although, this had proved to be some challenge because I had my name scaled down and placed to the right, which did not even out my image on the bottom right. To fix that, I had placed the social media icons on the bottom right corner along with my bio description near the top right. This way, it did not make the overall look of the website to appear teeter-tottering onto the left side more than the right.
Another detail that I had included into this design for the computer screen version was the gray dashed line joining the pages together; this was mainly inspired from a infographic about the music artist, Chance the Rapper, after researching for reference images for another project. I liked how it had interlinked the topics together that was not too bold and not too hard to see, so I thought it would be best to mimic the graphic element onto this design.
One more website that had inspired me on this process, especially for the mobile version of my website, was https://www.wix.com/blog/2020/02/mobile-website/, which had numerous amounts of different websites created for mobile. While scrolling though, it had reminded me of the process for designing apps--that since the website was now on a smaller screen, the information will have to be scaled down and some text will need to be placed on additional pages in order to not overcomplicate the design of the homepage. So now when the next project calls for us to make our mobile version workable, the user will be taken to another page holding the information they wanted after having clicked the page name associated (for example: click on "projects>redirects you to another page listing. all four projects>clicks on one specific project out of that list>now redirected to the page holding the necessary content of that assignment).
