Cyber Security Portfolio Design | Dina B Designs

top of page

Artboard 61_4x.png

PROJECT

Responsive Portfolio

CLIENT

Cyber Security Engineer

GOAL

The goal was to design a responsive web portfolio for a Cyber Security Professional showcasing their previous experience, projects and blog posts. The client wanted the site to be very simple with a tech style touch to it.

Artboard 1_2x.png

ANALYSIS

Since the client had no portfolio prior to the request and I would be making it from scratch using Figma, I needed to research some inspiration of existing engineer portfolios that were simple but showcasing a tech style. Here are a few screenshots of what I have seen:

Screenshot 2023-02-24 at 14.01.30.png

Screenshot 2023-02-24 at 13.49.23.png

Screenshot 2023-02-24 at 13.49.48.png

Screenshot 2023-02-24 at 14.02.30.png

Screenshot 2023-02-24 at 14.02.22.png

Screenshot 2023-02-24 at 13.48.24.png

INFORMATION ARCHITECTURE
Since the site is a portfolio, I wanted to make the information architecture simple for the user to navigate and access what they were looking for in a limited number of clicks, so I have constructed the below:

Portfolio IA.png

LOW & MID-FIDELITY WIREFRAMES
Now that I had established the information architecture of the elmex, I was ready to sketch the low-fidelity wireframes by hand and turn them into black and white mid-fidelity wireframes using Figma; here are some of the screens below:

HIGH FIDELITY WIREFRAMES & DESIGN SYSTEM
I made the following design system on Figma - including styles, typography, colours, components etc.

Frame 1.png

Frame 2.png

Frame 3.png

cyber _2x.png

bottom of page