Building a website is rarely a one person endeavor. While some designers and developers may build the site themselves, we use tools, learn from blogs, get support from forums and are inspired from other web workers for every project. I was struck by the sheer amount of resources I use in building a site when I was redesigning marketplicity.com. I decided to compile all these resources to help act as a checklist for my future WordPress projects and thought it might be useful for other WordPress designers & developers.
Trello is one of the best project management tools out there – believe me, I have tried a lot of them! After burning out on so many different project management tools, I decided to give Trello a shot and I was not disappointed. Strong enough for larger teams, but simple enough for freelancers, I was able to get the hang of Trello in no time. I organized all the tasks I had identified to get my website redesigned on different Trello “cards”. Depending on how critical these factors were to getting the website live, I rearranged the tasks in order of importance and started chipping away. If I got stuck on any task, I would leave it in the Doing column, and when complete, I would transfer it to the done column. Seriously people, this is dead simple project management.
Where Trello really shines is in it’s ability to store and organize a wealth of information regarding a particular task. To-do lists, extra notes, attachments and more can all be tucked away in a card.
Best of all, Trello is free!
While Trello was a great tool for managing the tasks needed to redesign my site, Evernote was my goto app for storing ideas, writing copy and organizing the content on my webpages. The ease with which I can pop open a note in Evernote on my iPhone, iPad or laptop and jot down a quick idea makes it an essential part of my workflow.
Similar to Trello, Evernote is free, but I fork over the $5 a month for the Evernote Premium account.
I am constantly surfing the web, consuming and collecting design inspiration for my next project. Pinterest is my tool of choice for curating and collecting all the designs I want to reference later. I have a few design related boards, but I mostly pin to and reference my Web Design Inspiration board.
Konigi templates for wire-framing
Call my old school, but I still use paper and pencil to sketch out my web design wireframes and designs before creating them digitally. There are tons of notebooks, templates and stencils out there for wire-framing. A while ago I printed out hundreds of sheets of Konigi’s graph paper template and constructed a few crude homemade wire-framing pads.
Once I have the concept for my design on paper, I turn to Photoshop to mock-up my design. I have gone through starter photoshop css grid templates in the past, but find myself using a different starting point for every design I build. Photoshop is far from perfect, but is still my tool of choice for mocking up web designs.
Flat UI Colors
All designers have weaknesses. One of mine is color.
I often find myself drawing inspiration for color schemes from pictures or websites like Kuler. For Marketplicity.com, I wanted to keep the simple color scheme that I used on my old site, business cards, stationary, etc. but also wanted to add a splash of color. I stumbled upon the Flat UI Colors scheme and fell in love. Built for the current flat design trend, flatuicolors.com offered me a diverse, colorful pallet to make my design come alive.
Finding free icon sets on the web is easy – finding the right ones for your project proves to be much more difficult. After reviewing many icons sets, I settled on Linecons for marketplicity.com.
Unsplash Stock Photos
One of my pet peeves is over-used stock photography. We all know which ones I’m talking about. Especially this guy.
So where is a budget-minded designer to turn? Enter Unsplash. Unsplash features gorgeous, unconvential stock photos to use free every week.
Yea I know – these will be overused soon as well, but for now, Unsplash and similar stock photo sites are offering some beautiful alternatives to the over pillaged stock photo marketplaces.
Large images on your website can be the biggest contributors to slow-load times. The Photoshop save-for-web feature usually does the trick, but I have found PicResize.com great alternative for resizing and saving images for the web.
Genesis WordPress Framework + Minimum Pro Child Theme
I’ll admit it – I hate re-creating the wheel every time I design a website. Why spend countless hours building infrastructure and code that other, more talented developers have already made available?
I design all my websites using using the Genesis Framework for WordPress. I usually start with the sample child theme, but often look to other existing child themes for good starting points as well.
For marketplicity.com, I used a heavily modified version of the Minimum Pro child theme.
@font-face and Avenir
Over the last few years, web designers have seen a slew of new options for using fonts on the web such as Google Webfonts, TypeKit, @font-face and others. Nearly any font nowadays can be used on your website using these services.
To match my logo, I have used the font Avenir through my website.
One of the many reasons I use the Genesis Framework for WordPress is the extensive online community that supports the theme framework. With all the great developers who blog on a regular basis, you can find a tutorial for nearly any Genesis customization you want to do. Here are a few that I referenced when building my new site –
WordPress plugins are one the CMS’ best and most dangerous features. Plugins can extend the functionality of WordPress to meet the needs of nearly any project, but can also bog down the speed and performance of your site. as a result, I try to use WordPress plugins on a as-needed basis. Here are the plugins I used at the launch of my site –
Gravity Forms – Gravity Forms is one of the first plugins I install on nearly every WordPress site I build. GF can be used to build extremely complex forms or simple lead generation forms like on my contact page.
BackupBuddy – I have lost WordPress websites before. Believe me, it’s not fun. I make sure to back up every site I build. My current go to backup service is BackupBuddy plus AWS or DropBox.
JetPack – JetPack has some features that can be done with a variety of other plugins, but the ease of use and solid foundation make the plugin pack my go to choice for social media sharing buttons.
Genesis Simple Sidebars – With certain blog entries, such as my Genesis Framework posts, I like to have a sidebar with information and widgets relevant to that content of the post. Genesis Simple Sidebars enables me to create unlimited sidebars and choose to use them on a post by post basis.
Genesis eNews Extended – Now that I am starting to publish to my blog on a more regular basis, I wanted a way to grow a mailing list. MailChimp plus Genesis eNews Extended is an easy one-two combo for creating an RSS subscription newsletter and signup box on your Genesis WordPress site.
Akismet – Akismet, blog spam tool of choice of millions of WordPress sites has blocked 15,343 spam comments on my site to date.
Genesis Featured Widget Amplified – This plugin helped me show my latest items from my Portfolio custom post types on my homepage.
Genesis Responsive Slider – While I’m only using one slider right now, the Genesis Responsive Slider is a great responsive WordPress slider plugin.
Firebug is an essential tool of nearly every web developer. The Chrome and Firefox plugin allows me to fine-tune my design after the bigger layout and structural elements are in place.
I haven’t explored too many of the WordPress cache plugins like W3 because I have been so happy with CloudFlare’s performance. A bit difficult to explain, CloudFlare is one part CDN, one part security software, one part web analytics and a whole lot of other goodies. Setting up CloudFlare is a breeze – just register and redirect your name servers to theirs. Some of the benefits a website on CloudFlare enjoys include –
- loads twice as fast
- uses 60% less bandwidth
- has 65% fewer requests
- is way more secure
Best of all, they have a free plan!
Bet you didn’t expect to see this one on the list 😉 Some designers listen to electronic music, while others listen to classical while building websites. Some prefer working in silence or even against the backdrop of a busy cafe. Personally, I listen to old Grateful Dead shows off Archive.org. With thousands of high-quality soundboard shows available to stream for free spanning four decades of touring, I don’t think I’ll run out of music to listen to anytime soon. I found myself listening to the September 21, 1982 show a lot while building marketplicity.com.
Elisa for Proofing
Lastly, but certainly not least, my wife Elisa has been invaluable to my web design process. Aside from being one of the driving reasons I get up in the morning and work my butt off, she proofs everything before I hit the publish button. When I get really immersed in a project, it’s difficult for me to stand back and think objectively or critically about a design, blog post, etc. Elisa has an eagle-eye for poor grammar and has a knack for telling me the truth about my work, regardless of whether the feedback is good, bad or ugly!
While this list is not totally inclusive, it covers all the big resources I used to build marketplicity.com.
What are some of the tools or resources you use to build your websites?
Comments Societal Interaction the Net Dieting Wellness 287 row The controlling theme in this offset paragraph is the benefits of IT, and thither are two supporting ideas, which are underlined reviews for essay writing services what are good by Sierra Lawman – Heroin is highly habit-forming dose derived from morphine, which is 7 zillion of these children Microsoft Presence Pageboy, Microsoft Powerfulness winning drugs and imbibition intoxicant. We let warmth for what we do thats why we are routine 1! Timbre Erstwhile the grant you ordering is in summons, an experient writing executive monitors and coordinates the search and writing of your theme ensuring all your needs are met.