Design Layouts (Wire framing)
Out of the three online portfolios I previously researched, I chose to look more into Sean Halpin’s website.
The home page goes automatically into his About page. The only part that didn’t seem to be a part of his About section, is the giant picture (and img element) that placed on the very top of the page. It stretches across the whole screen and blends in with the navigation bar on the top of the screen. If you scroll down, then the navigation bar slides up to disappear and if you scroll up, the navigation bar (nav element) slides down to reappear. Another UI that the home page includes is when you scroll over the words in the navigation bar, the word fades into a dark green color. But when you scroll out of the words, it changed back to its light green color. Also, he has a small cartoon picture of himself (img element) on the left side of the navigation bar, which brings you back to the home page when it’s clicked.
The project list is on a another page in his website. It’s titled “work” which displays all the projects he has worked on. When you scroll down, you’ll see that he has separated his work and it’s description into sections. You can tell because he used different colored backgrounds. On this page, you can see that he stacked each element on top of each other while they are vertically centered to the middle. For each project section, he has a picture of the project, the title of the project, its categories, a short description of his work, and a button that takes you to that project. That button turns darker when you hover over it.
If you scroll down on the home page, you can see that he includes his about me. Like the project list, he vertically centered a cartoon picture of himself, with a “Hi.” under it and a short introduction of himself under that. If you keep scrolling down, you’ll come across his “What I can do section”. On the first part of it, he has a picture of on the left and a short description on the right of it. On the bottom of those two elements he includes another description with picture on its right. In those pictures, he has a small part of it that automatically switches between other pictures (transitions).
On all the bottom portions of each page, he provides a contact button that says “MESSAGE ME” that turns darker when you hover over it.
For my portfolio, I want to include a navigation bar at the top that has a similar style to Halpin’s, justified to the right. I want it to disappear when the user scrolls down and I want it to reappear when the user scrolls up. I plan on making the home page, project list, and my resume on separate pages.
Since I’m not too sure on what to put on the home page, I’m just going to make it really simple. I’m most likely going to put a big picture on this page that represents my personality. It will have a big title in the top center of this page. I want it to leave a trail effect when the user mouses around this page.
I want to have my projects on separate sections like Halpin’s. It’ll stack them on each other so that the user won’t mix up my projects. In each section, I will include the tile of my project on the top with a picture under it. When you hover over the picture it’ll get bigger and will cast a shadow so that the user knows that you can click it. When they do click the picture, it’ll take them to the website on github. Under that picture will include a small description of the project and the features it include. Each section will display on its own and not show the other sections on top/bottom of it. When you scroll down this page, it will switch between the sections that contain my project.
I’ll make this very basic and include a embedded document of some parts of my resume. I don’t really want to display all of my resume so I’ll just include the non-personal information on the page.
On the the very right of the navigation bar, I’ll include an icon that turns darker when you hover over it. When you click it, a side bar slides from the right side of the page with a cartoon picture of me on the center and a short caption below it. It’ll also have a “Contact Me” button that let’s the user send emails to me. On the top left of this side bar, will have an exit icon that’ll turn dark when hovered over, and will disappear when it’s clicked.