Wire Framing

The site I chose to wire frame, or layout, belongs to Ryan Micheal J., which may be found here. His portfolio caught my interest out of the others I had previously researched due to its simple design, as I am testing the waters in wireframing. The 3 parts of his page I will be explaining are: Home, Project List, and About.

Note: I considered how each page would look wireframed on paper, but I used Wirify to make digital wireframes to save time.


Home page before and after Wirify.

The home page features an eye-catching geometric design created by Michael himself. When you first log on to the page, ink seems to be applied to the logo, adding a cool effect. It is actually just a video. In the bottom left corner, there is a simple navigation bar that is absolute to the page, as it doesn’t move even if you scroll down. The positioning of Michael’s name and occupation in the upper left is also absolute; it doesn’t move either. In the wireframed image above, you can see that there aren’t many blocks. The upper right is a header, the center is a div containing an image/video, and the bottom left is the navigation, which is just an unordered list where each li is linked to different parts of the page. A special user interaction is the strikethrough that occurs in the navigation to show which part of the page you are on.

Project List

Recent Works before and after.

The project list has a div in the center that periodically cycles through images that showcase some projects Michael has completed. This section also uses divs and links (<a>). There are several user interactions: hovering over the images causes the image to move similar to the mouse. If you click on it, you are redirected to the page corresponding to the project depicted.


About before and after

There is a single paragraph centered on the page that briefly describes Michael. There are links included in case the user wanted to learn more about his company or contact information. It is just a paragraph element, where the only special user interactions are the links.

Personal Portfolio

I conducted this research so I could get a better understanding of how to wireframe. Thus, I would be able to create a layout for my own portfolio, which will also consist of a home, about, and resume page. I aspire to have many interactions throughout the portfolio.


At the top of my page, I’m going to have my name in the header, maybe with a logo of my own design. Right below, I’m going to have a menu bar that takes up most of the width of the screen. The menu would be able to direct the user to Home, About, or Resume. My home page will consist of a large picture of me with a brief (maybe a paragraph) description to the right of it. I’m considering making the picture circular and “rolling” it in. This could be done with a div with my picture and paragraph element.


The about me would be a short paragraph about how I came to do coding and other things I do. I also want to have boxes set up around it to form a square when you look at the boxes and the paragraph as a whole. The boxes would be different colors, which would lift up like blinds when you hover over it to reveal fun facts about me. This could be done with divs and a paragraph element.


I’ll embed my current resume on this page. When clicked, the page would be redirected to a copy of my resume on Google Drive. I will also put a caption on the bottom saying, “contact info provided within the resume” or something similar to that. I am yet to figure out how to embed my resume on the page.


Wireframing does not require a lot of effort. It is also helpful to layout pages before thinking of the actual content. Learning about wireframing has helped me better understand how I want to do my portfolio so that I don’t have to think too hard about it in the future.

Like what you read? Give Angela Geronimo a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.