Before I start initial concepts of my portfolio website, I need to gain inspiration and the familiarity of other portfolios. This will allow me to develop a strategic and stylistic plan for my website using the inspiration of others. As I have originally does something similar like this I will also be referencing the same portfolio sites but mainly newer ones as I reimagine my portfolio website. I will not just be noting the good aspects of others portfolio’s but also the things that I dislike. To research portfolios in order to gain inspiration I must also study how they structure their information especially for their projects, this can give me a good idea on how I can structure my own projects from initial concept to working prototype. Overall this will allow me to work on my critiquing skills and allow me to create the best portfolio site possible that suits my personality and values.
Misiono Yokoyama Allen
Misiono is a young “nerdy” internet visual designer and creative director living in Northern Virginia. She has led and managed design teams over at fortune 500 companies.
What caught my eye on her portfolio is her beautiful and elegant home screen, the use of muted pink, gradient purples and mellow serif typography creates a sense of elegance and emboldens this unique soft and kind personality which Misiono tries to portray from the design of her portfolio. In the home screen, I love how everything is perfectly spaced and refined to precise proportions which include the unobtrusive NAV bar that gives off this “floating” effect due to the surrounding negative space which in effect allows the NAV to be seen. Although, having too much negative space is not always a good thing, to combat this Misiono put her abstract monogram on the opposite of the NAV bar which balances the visual and negative space out.
One of the other features of this home screen I found really appealing was the use of a topic/project bar at the bottom of the screen, this matches similarly with her navigation bar; evenly spaced and perfectly proportioned. Also, The use of modern sans serif fonts for directions combined with the serif fonts for headings creates a bold and perfect blend of distinction between navigation and information. She gets straight to work with the devolved structure of information using consultative linguistic register quickly explaining her name (H1) her title (h2) and a pull content (P) on why you should check out her work.
Scrolling below to her projects, which is in one whole page, we find a unique and chaotic layout, almost going against what we originally see when clicking onto her website. This almost creates a juxtaposition between both sides of the site. I really enjoyed this layout as it’s unique, gridded and distinctive with every project containing a different background colour making the end of the border clearer to see in such a chaotic layout. This method is also really good for confining as much information as possible in smaller spaces. I really love how professional and simple the animations are when you hover over a project which details the title.
Structing and Detailing Projects:
For this analysis I will be looking at one of Misiono’s project named
However, one of the things that I didn’t like was her ‘about section’, although she was trying to be different and unique through a hierarchy and odd positioning of the text I found it really distracting to read constantly getting lost every time I went to the next line. In my opinion this is very confusing and irregular, although, similar things can be said about her layout of projects.
Overall, I love the how sculpted and manifested her site to create a stunning and concise portfolio. I will use her for inspiration in parts of my new website.
Eric William Hanson
Eric Hanson is a designer and researcher that has worked in photography, film production and graphic design. Currently, he focuses on UX and furthering his studies in Information which he is trying to obtain a masters.
Eric’s portfolio website is clear, modernist and concise as he uses limited words to navigate his page, instead he uses the essence of visuals to lure his viewers to investigate further. His black and white colour palate creates a clear cut motive of abruptness and ‘to the point’ embodying his sense of authority and imagine. As this black and white colour scheme is seen as timeless, his choice of serif typography gives off a similar feeling of being modern and a sense of authority creating a striking yet resilient tone of voice throughout his portfolio. His hero banner consists of a jet black rectangle with bevelled edges containing his initials in white creating closure amongst the negative space. This is very ‘simple’ and clean, managing to pull it off well. It matches his modernist configuration and consistency of his personal website.
His navigation bar is very minimalistic and a feature I really liked was the clean pull down option showing all of his alternative projects. The blue highlights when hovering over a hyperlink contrasts with the white which looks really well.
Scrolling down on the same page we find his project laid out in a single yet large column of semi-curved rectangles while engaged in a drop shadow to create a distinct border around the rectangle. He manages to use negative space depleting the page of any unnecessary colours (minus the projects) which is consistent with his website image. This looks really well and modern. I love how the animations swoop in creating a sophisticated and professional introduction to the projects at hand. The layout of his projects show his icon in the top left, wordmark/name in the top right and project in the middle, this shows vital pieces of content in a clean and precise way.
Structing and Detailing Projects:
For this analysis I will look how Eric structured and detailed his mobile app named ‘reach’.
- Starts of with a question asking the user “how do we foster connectedness through events at University of Toronto?” (answers it below)
- Small overview of what the app concludes
- Research – (using data and statistics)
- Asks another question, then answers it. – shows a pain point chart below
- Prescribes empathy mapping, affinity diagrams and linear journey of studied guests
- Flow charts
- Testing
- Finding solutions for errors
- Refining
- Feedback and user issues
- Further refinement
- Results
- Closing thoughts and reflections
Eric makes his values clear on his ‘about me’ section using a large square black and white picture of him – consistent with brand identity and self image. I also enjoyed his use of the type scale visualiser quoting a powerful and following a unstructured formula. I found this unique and underlines his quote even more. Also, for his ‘about me’ paragraph I found the mute blue works really well.
Some of the things I disliked was the lack of information as I felt like there could’ve been a tiny bit more added especially with all that empty negative space on-screen. However, alternately I felt like during his project page there was too little negative space between projects and felt like they needed spaced out more as the pacing felt off. Lastly, whilst I was using his website I sometimes got lost and felt like there was no sense of direction as the website has no push or even pull content to encourage the viewer to continue to keep scrolling.