Mocking a Website Design as a Non Designer

Aditi
Aditi
Nov 5 · 3 min read

I am currently on the hunt for my next Software Engineering gig.And I need to create a website to flex my skills. Since I have time on my hands, I am going to mock up own design.

Finding a platform for the Mockup

After doing some researching on Google, UXPin seemed the most intuitive to use. Sketch is already downloaded to my machine but it was quite the learning curve, and found it limiting in the free version.

When a new project is created, there is a blank canvas, and a floating toolbox.

I began creating the design for the desktop version of the site. There is a selection of bootstrap components. So I placed a navigation bar on the top right.

Whoops! I think I need a logo?

On to the Google, I go again. I found this nifty logo generator.

After answering a few questions about my “business”, several designs were generated.

It was more options then this screenshot can show. The simplicity of all the brands really work with my brand. So I went with this one:

Love loved the color, but it didn’t mesh well with the color of my navigation bar, so I changed the color, and filled the background color of the body as well.

FYI: I used color paletton to create the colors for my site. https://paletton.com/

I added some text in the middle to provide an introduction. And an About me section. Almost Done!

I do admit that I got a little lazy in adding the actual images of icons, and images for my portfolio section:

I built a very loose mock, and can happily start working on my site.

Aditi

Written by

Aditi

Customer Support Specialist @DiligentSw, and a beginner of front end web development :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade