In case you are just tuning in, this is Day One in my five day sprint to redesign, rewrite, develop and launch the CB.Graphics website. Oh, and I should mention that I’m building a custom WordPress theme for this site. Yeah.
I realized that my previous site really wasn’t working. There were parts of it where you would get weird gaps, like at the bottom of the orange section in my about page.
The thing that frustrated me the most was the portfolio posts. I was fighting the theme I was using to get the layout right. And even after I got most of the technical issues resolved the result was very flat. If I was a visitor I would have clicked off of this page immediately. It looks forgotten and broken because it is.
What the Plan Was
Below is a list of what I had planned to accomplish in Day One. I’m proud to say that I checked every box and the project is on schedule!
The very first thing I did was sketch out a site map. I listed out the pages I wanted to appear on the high level. I included any pages that I thought might be useful in the future so that I could set up the theme with those things in mind as well.
At this stage I also brainstormed anything that might need to be changed after I complete the website. I believe that it is important to “brand all the way through”. To me this means that everything that my clients touch and see is connected and consistent and branded.
I will be working at a later date on several print documents to support the packages that appear on the website. I will also be updated my forms based on feedback from some of my clients. The updates include:
I allocated three hours to nail out the wireframes. I wanted to focus most on the home page and “about” page as these were both severely lacking on my previous website. In my experience, if you can get the home page right everything else will flow pretty naturally. By the end my desk was completely covered in paper.
I cannot stress enough how important wireframing is. Sometimes when we dive right into programs and coding we can get lost in the structure. I know that is especially true for myself. My wireframes are always really rough. In reality wireframes are like handwritten notes in sketch form.
The purpose of the wireframes is to just block out content. I didn’t want to do any content writing before I completed the wireframes because I wasn’t sure what content I needed. This process looks different for a lot of people. I find that for myself and for copywriters that I’ve hired, it’s easier to think through the “what” first by sketching. My wireframes are always covered in notes. When possible I like to start thinking about how I am going to code everything before I even get to the computer.
I spent the majority of the day on design. I decided not to waste too much time on writing content. It is easier to stay focused on one part of the project before moving on to the next. I wanted the design of the site to still feel like all of the other branding that I’ve been doing. As a result, it has a lot of the same elements as my previous site, but it feels much more cohesive.
I use a lot of angles in my print design for my brand and decided to push that even further in the new design. I also wanted to challenge myself on the development side to do most of the angling in the CSS.
There were two main goals in the design: a) clearly communicate my value proposition, repeatedly and b) have more call to action. My previous site was really passive. I don’t think it was clear to my visitors what they needed to do if they were interested in hiring me. I also wasn’t showing off all the cool work I’ve been doing. I pushed all of this to the home page.
To further show off my work I will be dropping portfolio pieces in my blog as well as in the portfolio section of the site.
If you are wondering what the filler text is on the design images you can read about it here.
So far I’m very pleased with how it’s turning out. Day Two I will be diving into the meat of this project: code. Even though I had planned on doing most of the writing on the tail end I will probably move this around.