UI/UX: Creating My Developer Portfolio (Part 2)
This is the second part of developer portfolio journey so if you somehow came across this article I would suggest that you read part 1.
At this point, I have finished planning out the general idea behind my portfolio. I had the projects figured out, a general idea of the design, and an idea of how I was going to host it. Now, I needed to move on to creating some UI/UX designs.
Doing this is somewhat new to me, as while I have used software such as Figma in order to create some basic prototypes for other projects I had never really undertaken a whole design process before which meant that this was going to be a different experience.
User Personas
Already having figured out a general idea of what I wanted my portfolio to look like, I began to work on creating a user persona for my portfolio. The thing I very quickly picked up on is that creating a user persona for a portfolio is rather difficult because there are less an end-user and more of a target-viewer. In all honesty, the only reason that I did this was so that way I could go through what the internet told me I needed to do in order to design an app.
However, because I really wanted to experience all of the parts of creating an app I still tried to create a user persona with much difficultly until I had an idea. Rather than creating a persona for the target-user, I created a persona for the target companies, using this as an opportunity to learn more about what some of the top firms are looking for in an employee.
Like any developer without a job, I decided that my dream company of choice for this part of the project would be Google. While I know that I don’t have the skills currently to work there, to me it seemed like a good idea to at least get an idea of what the company was looking for; using that as almost a benchmark for the other companies that might look at the portfolio that I created.
After some research, the information that I came up with was used in order to create the persona above. While I didn’t need to do this in any way, shape, or form, I do think that this exercise did help me to not only figure out what I need to do in terms of the content that I include in the portfolio but it also helped me to understand a bit more about the design process.
Papers and Maps
At this point, it was time to actually create the designs for the portfolio itself. Everything that I had read online suggested drawing out the site before jumping into any prototyping tool, so that was my plan, but first I needed to create a sitemap. I wanted to have a way to see how many different pages I was going to have to create and design before I started to do so.
Using some free software online I was able to create the sitemap below. This helped me to at least get an idea of what I was going to be creating even if it didn’t really help me to understand what that would actually look like.
It is also worth noting that I chose to design for mobile first because this is something that was a common piece of advice across the internet. By designing for the smaller screen first, it would be easier to scale it up.
Once I was finished with the sitemap I began to draft different versions of the main site pages. Over the course of a couple of days, I created at least four different iterations of each major page while also trying out different menu options that I could use. Doing this helped me to really get an idea of what I wanted it to look like before I spend a large amount of time trying to design the perfect site. My introduction to paper drafting really helped me to see the value, because for a perfectionist like myself, there is no way that I would have been able to complete the design without it. Once I finished with the drafts of each page I created a final page that contained my final thoughts on the design.
Wireframes, Mockup, and Prototypes
The start of this section was a bit confusing for me because of the large amount of conflicting information on the steps for creating a design. After some deep thought and lots of Googling, I came up with the following way of creating my final design.
- Wireframe: Basic B&W Layout of the application
- Mockup: Adds color and images to the Wireframe
- Prototype: Adds interactivity and animation into the Mockup
In order to create these designs, I turned to Invision Studio as a tool, as it was free and supported the different features animation-wise that I wanted to use for the prototype.
Wireframe
I started creating the basic Wireframe using my designs as a reference and as such, it didn't take that long. Due to the basics of the wireframe, I was able to throw together a basic design that used Lorem Ipsum for text and rectangles for images. The result was a bland, but understandable idea of what the final product would look like.
Mockup
I then moved onto creating the mockup which for the most part was just adding colors to the image above, but I had to do some other things as well. I first changed the menu bar to sit on top like most websites because after sitting with the wireframe for while I just felt a top menu bar was cleaner. I also created a logo that would actually sit on the home page of the application. Other than that, it was mostly just writing ion actual information, adding real images and coloring the otherwise bland design.
Prototype
Now all I had to do was add some basic interactions to the mockup and I was done. Using the simple features that are building into Invision Studio I was able to get a functional prototype up and running in around an hour.
Next Up…
Now I need to get my design reviewed, redesign it for desktop, and then start creating the actual site!
