The Graphics Grrrl website is a project I’m super proud of and have been excited to share with you all! I completed this project back in August and, let me tell you, I’ve never learned more from a single project than I did with this one.
Something interesting about this particular project is that the designer was the client. This is always a bit scary because I expect them to be extra critical, but she was open to my strategy suggestions and trusted my development work throughout the entire project. Woo hoo!
This particular designer has over 20 years of experience in the design field and it shows in what she created. I love that her personality and style came through and that she wasn’t afraid to stray away from what you’d usually expect from a blog-based website.
Framework
Although I generally develop my themes on the Genesis Framework, this one was completely custom. This allowed me to code the unique layout and features without removing or altering 75% of Genesis and ending up with a bunch of extra bloat.
Technology
Here’s a quick outline of the technology used in this project:
- CMS: WordPress
- Programming Languages: PHP, jQuery, HTML, CSS
- Plugins
- Integrations
- ConvertKit*
- YouTube
* indicates an affiliate link
Site-Wide Features
This website contains a bunch of fun and unique features that you’ll want to check out.
First are the arrows that display when you hover over the menu items. I was provided with the graphic to use for the arrow and was able to make it happen with some simple jQuery. I don’t often have features like this included in designs I’m given, so it was nice to get back into some jQuery, even if it was just a few lines.
Next came the scroll-to-top arrow that floats with you down the page. Again, this was some simple jQuery and in a round of revisions, we decided that it should only show up once you actually have somewhere to scroll to so I made an update to make it disappear when you’re at the top of the page.
Another fun feature you’ll see throughout the site are the full-width background images. It’s common to see blocks of color, but using images like we did on this site is quite a bit different. Rather than setting the background-color of the element, I instead set the background-image property and tweaked a couple of other settings. To make sure things looked good on large screens as well as phones, I added media queries in to swap the images once the screen hit a certain size. That way nothing looks too stretched or squished together.
You’ll also see that the header section is formatted differently on each page. My goal for this was to make it as easy as possible for the client to be able to edit and customize the text and images in these sections without having to worry about messing up code or using shortcodes. To do that, I used the Advanced Custom Fields plugin and made several page templates to allow text, arrows, and buttons in various locations. To see an example you can compare the Home page with the Contact page. Since those are their own page templates, the client can easily create a new page, switch the template setting, and have a header section just like any of the other pages she already has.
And last is a fun little plugin for social media icons that I coded myself. It allows the client to go in the WordPress Customizer and add a link to any of the main social media platforms. If the URL for a platform is left empty the icon is hidden and when a URL is added the icon is displayed. This was a nice light-weight way for me to avoid hard-coding styles for a specific plugin in a widget area, while still allowing the social media links to be updated without the client having to call on me or go into the code to make changes herself. And the best part is I can use it for other projects in the future! My job just got easier 😉
Let’s dive into some of the specific page features!
Homepage
Like the header sections, the various areas on the homepage were created with Advanced Custom Fields to allow the client to update the text, buttons, and video without having to worry about breaking the code.
The “Download” and “Start Here” buttons were custom graphics provided by the designer that I was able to set as the background of a button-type input field. The Download button presents a pop-up, which was an integration between the premium Bloom plugin by Elegant Themes and a ConvertKit* form.
And last is an amazingly entertaining video recorded by Graphics Grrrl herself. The video is hosted on YouTube and was easily integrated with the website. (For real, give it a watch. She’s great!)
Blog page
The blog page is one that I really love in that it let the creativity of the design (/client) come through. She strayed from the traditional layout of a Blog page in hopes of making things more user-friendly for her readers. Rather than scrolling through pages of unrelated posts, you instead see the latest post for each category on the main Blog page. Then, you can click through to see more posts in that category. I don’t know about you, but I love it!
The images next to each post are set as the Featured Image and also display in the header section of the post itself. The excerpts are something the client is able to define manually for each post to make sure it gives the perfect preview and that the length of it fits well with the layout.
This page also features a sidebar. My favorite part of the sidebar are the arrows that appear when you hover over the menu items. Similar to the header navigation, this was done with a little bit of jQuery and CSS.
Single post
Most of the special features on the single post page have been explained in previous sections, but the one extra feature is the custom click-to-tweet section you’ll see after you scroll past the sidebar.
This was done using Advanced Custom Fields in a way that would allow the client to add custom text, links, and tweet authors to each post. There are also two content sections in the blog posts, one that displays above the click-to-tweet and one that displays below. That way, she can write as much as she wants before the click-to-tweet displays.
Start Here page
The last page I’ll touch on is the Start Here page.
Right now, this page is being used to collect feedback from her readers about what types of content and courses they’d like to see in the future – genius!
While most websites will have boring simple checkboxes and text fields, I was provided with custom images to use for the form fields including checkboxes (both checked and unchecked – try it out!), text boxes, and buttons. It took me a few tries to get everything working perfectly, but with some extra CSS and a little jQuery to make the checkboxes work, the final result looks preeeeetty wicked. (Do people still say wicked?)
Final thoughts
This custom development project pushed my skills and made me try a lot of new things. I’ve never worked harder on a website and I’m so proud of how it turned out. Be sure to take a look at the site yourself and show Graphics Grrrl some comment and social media love while you’re there!
Looking for a developer for your client projects? Learn more about working with me by clicking the button below or feel free to reach out through my Contact page!
Or, if you’re not quite sure how this whole designer/developer collaboration thing works, check out my free course, Get Back To Design, and join the community today!
10 Steps To Go From Hours Of Code To Development-Free Design
