freelance graphic design

The Design – Bringing an Idea to Life

Business Blog – Chapter 5

About four months into 2015, MyClyq started taking shape. I had done all the early work of getting a name, logo, color scheme, slogan and mission statement. Now I needed to put them all together into the most important part: The Design.

Designing a web-based platform is incredibly difficult. It is even more difficult when you don’t have any experience and refuse to let someone who has the knowledge do it for you. The reason I didn’t want to hire someone to design my website was because I had a specific vision in my head for how I wanted it to look. Even if I was able to explain it to the designer, I don’t think it would have looked the way I wanted it to look.

I decided that I was going to attempt designing the website myself. I know, it sounds ridiculous considering I mentioned I didn’t have any experience but I can also say that as a millennial, I basically grew up with the Internet. If you spend your entire life looking at websites, you probably know what looks good, what works, what doesn’t, etc.

Since I was building an entire web platform, I knew it was going to require many different types of pages, for example a home page, a landing page, a billing page, etc. Therefore, I needed to create a sitemap before I started designing anything. When I was in high school, I took an intro to programming course where the only thing I really learned was that you can easily create a sitemap using Word.

Creating a sitemap is just a visualization exercise. As I mentioned, I had a specific vision for the platform so I visualized the site, page by page, writing down each page title as I went along. The end result is the sitemap I listed below. This was the first draft of the sitemap and although now it is much larger and more intricate, this was the first step towards getting there.

MyClyq Sitemap

First MyClyq Sitemap

Now that I had a general idea of how many pages I needed to design, I decided to create a process. I would pick the page I wanted to design, like the home page for example, and then do a little research on other website home pages I thought were well done. I would go through each of them, one by one, taking notes on what I liked and disliked. After I had a few pages of notes, I would try my hand at actually designing the outline of each page, known as the wire frame.

Wire frames are basically the skeletons of each page; a lot of them aren’t even in color. I found that using a large whiteboard was the best option for the wire frames because it was easy to make edits on the fly. After designing each of the pages listed on the sitemap, I would take a picture with my phone and move onto the next. When I was finished, I uploaded all nine images onto my computer.

Now that I had these design images, I wanted to clean them up. The white board was easy to use and edit but it definitely wasn’t neat. After doing a little bit of research I found that there were several different programs and applications that I could use to create digital and professional wire frames. In the end I decided to buy a program called Balsamiq Mockups because it was said to be one of the best, despite having free options like Pencil available. I decided that this was an important investment so I wanted to use the best program I could find.

After watching the Balsamiq Mockups tutorial, a few YouTube videos and just playing around for a little while, I started to get the hang of the program. It took me nearly an hour and a half to copy the first wire frame from the white board images onto Balsamiq. However by the last image, I had mastered the program and it took me only 11 minutes. The image below is the first wire frame I created, which was for the My Profile page.

MyClyq My Profile Design

First My Profile Wire Frame

Now that I had created my wire frames, I was ready to move onto finding a programmer to make this website come to life.


Freelancers and Employers, be sure to sign up for our beta at

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2015 « MyClyq » All right reserved.