{"pageProps":{"postData":{"id":"2-portfolio","contentHtml":"<p><img src=\"/images/portfolio/1920x1080-desktop.png\" alt=\"Portfolio Final Designs\"></p>\n<p><a href=\"https://www.figma.com/proto/D5c4d4i07jRKUkqgXXrqPE/Portfolio-Design?page-id=0%3A1&#x26;node-id=511%3A2197&#x26;viewport=241%2C48%2C1.48&#x26;scaling=min-zoom&#x26;starting-point-node-id=591%3A3251&#x26;show-proto-sidebar=1\">Figma Prototype</a></p>\n<p><a href=\"https://www.figma.com/file/D5c4d4i07jRKUkqgXXrqPE/Portfolio-Design?node-id=0%3A1\">Figma Design</a></p>\n<p>This could be the most meta thing about this portfolio website; a page describing how this site was made. Alternatively, one could say that I have learned a lot of new tricks by doing the Figma designs for this portfolio of mine. I'd like to break down the design process in all of its detail.</p>\n<p>Currently, this site is a placeholder layout for the final portfolio design, which are conveyed here in the <a href=\"https://www.figma.com/proto/D5c4d4i07jRKUkqgXXrqPE/Portfolio-Design?page-id=0%3A1&#x26;node-id=511%3A2197&#x26;viewport=241%2C48%2C1.48&#x26;scaling=min-zoom&#x26;starting-point-node-id=591%3A3251&#x26;show-proto-sidebar=1\">Figma Prototype</a>.</p>\n<h2>Layout and Design</h2>\n<p><img src=\"/images/portfolio/1024x768-desktop.png\" alt=\"Desktop View\"></p>\n<p>When approaching my online portfolio, one of the things I wanted to do was come up with something that had as few clicks as possible to get to the information. If it's one thing that I've taken from all of my studies of Baymard and the entire user experience, less clicks to get to where you want to get to = easier navigation of site = overall better user experience. Certainly there's a lot more to it than that, but ease-of-use of a site is, undoubtedly, one of the most important aspects of a solid user experience.</p>\n<h3>Title.</h3>\n<p><img src=\"/images/portfolio/thumbnail.png\" alt=\"Name\"></p>\n<p>I went with a classic Outrun vibe for my name/portfolio title. The brush stroke is reminiscent of a retro style movie title, and is on the darkest part of the background. A drop-shadow effect has also been added here to outline and embolden the text. You definitely know it's me!</p>\n<h3>Social Links.</h3>\n<p><img src=\"/images/portfolio/contact-icons.png\" alt=\"Social Links\"></p>\n<p>I have included five of the most popular social sites currently, but will probably change for the final product once I decide which social sites are most relevant to my career goals. For instance, Facebook will probably not be included as it's mostly used for personal things (and not that often anymore).</p>\n<h3>Navigation.</h3>\n<p><img src=\"/images/portfolio/buttons.png\" alt=\"Buttons\"></p>\n<p>I'm opting for large, easy-to-see navigation buttons front and center, which should translate well from Mobile to Desktop. Cyan is being used here against the darker background so that it stands out and can be easily read. Text-glow and a near-white color is being used for hovering, while simultaneously dimming the rest of the options in desktop mode. The navigation will slide to the left as a frame opens up, showing the selected list of projects for that specific design.</p>\n<p>This is the current working list of project categories I want to feature, but will most likely be updated as categories change.</p>\n<h3>Project List View.</h3>\n<p><img src=\"/images/portfolio/scroll-box-items.png\" alt=\"Scroll Box Items\"></p>\n<h4>Mobile:</h4>\n<p>Once a user selects a navigation item, the button slides to the top, hiding the other menu options, while a back arrow appears to the user. Selecting the back arrow or the header that is now highlighted pink will hide the list view, and return the user to the default navigation view.</p>\n<p>The list view is made up of item components, each consisting of a thumbnail of the current project's most iconic image, a title for the project that is now in Cyan, and the first couple sentences of the project's main description, up to 4 rows of text high. The last row will be partially faded if the block of text continues beyond the initial 4 rows allotted. a cyan scroll bar will be visible to the user if the project list goes beyond the y-overflow.</p>\n<p>I went with this style because it highlights three of the most defining pieces of the project, including the name, a thumbnail and a few lines of the opening text which will have a quip about the overall idea behind the project.</p>\n<h4>Desktop:</h4>\n<p>The Project List View expands from the right, appearing as a line that opens up to the respective size of the user's viewport. This also slides the navigation from the right side to the left, setting the select colors (Pink Highlight and Pink Glow) for the category button and dimming the rest of the selected options to Cyan 50% opacity.</p>\n<p>Clicking on a pink item will return it to Cyan, using the colors as a visual indicator to the user that pink returns them to the previous view, while Cyan takes them forward. The sizes of the project list items will enlarge, increasing the overall size of the thumbnail, and increasing text size to more easily read on 2k and 4k monitors. I'm sizing text so that it fits relative on the respective screens.</p>\n<p>Again, large, selectable text is being used to increase visibility. Each project list item is selectable from the entirety of the div it resides in.</p>\n<h3>Project Detail View.</h3>\n<p>After selecting a project, the list transitions into the Project Detail View. The header is at the top, underneath is a larger picture of the thumbnail, and beneath that, a breakdown of the project. Following UX case study principals, each project write-up is broken up into a story and sections that focuses on the core ideas of the project, problems and obstacles that needed to be solved, and the solutions that got us to the end deliverable. Again, the whole idea is that the Detail View conveys a story and understanding of the project. For me, it was connecting with a time and a nostalgia that I relate to, blending the old retro aesthetic with new designs and layout practices to create something very \"Synthwave.\"</p>\n<h2>Final Thoughts</h2>\n<p><img src=\"/images/portfolio/sweet-logo.png\" alt=\"Sweet Logo\"></p>\n<p>While this breakdown of the Portfolio has not been \"exciting,\" it details the issues and thoughts that I had during the planning and execution of it. I want to bring a clean, simple, elegant design to showcase my content (which heavily revolves around gaming and user interface) in a simple-to-navigate interface. The ultimate goal is to finish the coding in Next.js/Typescript, with transitions that make sense, appeal to the aesthetic, and don't take away from the overall experience by being too flashy or intrusive.</p>\n<p>This portfolio is definitely an extension of my current likes and hobbies, as well as appealing to a crowd that enjoys the retro, \"synthwave\" feel that the fonts and colors are showcasing. If you want to call me out for any poor practices or the fact that I am still new to the professional side of UX design, please let me know! I love constructive criticism so that I can improve myself, appeal to larger groups, and improve the user experience all together for those visiting my site or interacting with my projects.</p>\n","title":"Portfolio Website","description":"This could be the most meta thing about this portfolio website; a page describing how this site was made. Alternatively, one could say that I have learned a lot of new tricks by doing the Figma designs for this portfolio of mine. I'd like to break down the design process in all of its detail."}},"__N_SSG":true}