For my site, I’ve created 4 sections. I intend for the whole website to consist of a single scrolling page with separate sections instead of separate pages. The sections are: ‘Home’, ‘About Me’, ‘Portfolio’, and ‘Contact Me’.
Seeing as they all live on a single page, there are certain parts of the wireframe that are consistent throughout. These include the Harry-Sun logo, my typographic name, and navigation bar at the top and a set of contact/social media buttons in the bottom corner. Additionally in the wireframes I included a little switch/slider in the upper corner. This is meant to be a switch for a dark/night mode I would implement in the site. All of these UI elements would remain at their positions on screen regardless of scrolling. Additionally, for the entire site the content is generally laid out in a 2 column format, intended for a desktop or tablet viewing experience. On mobile, the intent would be to switch to a single column of content, with adjacent elements being placed above/below each other.
Home:
This first page is meant to serve as a splash screen for the website. The top bar is extended into an entire page banner. This banner would be the banner I created for the animation, including the logo already in the animation.
On this page, I would only have a short paragraph about myself and a nice photograph of me. This page is really meant to serve as a general purpose cover letter for my website, giving people the few most important pieces of information about me as quickly as possible.
About Me:
This page is meant to serve as brief summary of my resume as well as to provide more insight into aspects of me not included in my resume such as interests and hobbies. Additionally, since I have more freedom with a personal webpage over a resume, I made sure to include space for a picture, or more if I want to continue this type of layout.
Portfolio:
This page is meant to display a preview of the different projects that I’ve done, specifically those that I’ve done on my own time or outside of the scope of assignments or a job. For each project, there will be a photo of the application as well as a brief description of what it is.
Contact Me:
For the ‘Contact Me’ section, I didn’t see any reason to include very much more than large icons for each website. This is shown by the continuation of the portfolio section in the wireframe as this section would probably be shorter than an entire screen. I chose linkedin, github, and email as linkedin is the only social media page I would want an employer to see of mine, github is the best place for an employer to find my projects or anything else I’ve done in the past, and email is my preferred method of contact from employers. While these options are in the bottom corner of the page at all times, some people may not see them and providing a large button to press at the end of the page helps to keep potential employers reading about me.
Mockup:
For my mockup page, I chose the porfolio section as it seemed to be the one with the most content and detail, having text and photos. For the menu bar, I chose a sky blue color, sticking with the daytime sky color scheme I’ve used in all the assignments so far. The Harry-Sun logo and my typographic logo are both shrunk down in the corner with the navigation icons, which are white to symbolize clouds. I chose a very mild green color for the background to play on the nature themes I’ve used while also trying to be as non-distracting as possible. I am colorblind so I’m not very sure about the particular color choice but I am sure about some sort of low-saturation green color.