How do I make slick websites?

I’ve built websites on many types of systems over the years but WordPress is my favorite framework.

My WP dev kit consists of a flexible blank theme and PhotoShop and wp toolset. That’s all I need for most projects, not a hundred rando plugins. And not with hand-coding everything for high cost and maint effort.

This pipeline empowers me to create everything from a full-fledged web-app with many-many dynamic structures to a simple brochure website.

A stable, futureproof and affordable custom website is the result.

I have a passion for interactive design, specifically the user experience design (UI/UX). I really like the process for attaining memorable designs, it almost feels like sculpting with information instead of clay. Creating low and conceptual wireframes that map out every function, loop, and block is my favorite task in the whole development process.

Website Development Pipeline

1.

First things first: Gather Website Content

There’s a few variations for website migrations and projects that already have content. Most websites need some of these.

  • Analyze and count existing content
  • Organize content. Paying special attention to custom types, parent-child structure relationships,  and making managing easy for the admins. -heart- admins.
  • Create / Acquire additional content
  • SEO targets for content, and initial implementation.



2.

Information Architecture: Creating the Structure

Based on our content analysis we create the structure of the website. This is where we create the user experience. I like to use simple wireframes to show this visually and a text sitemap list it out. Then we build it out with only a passing concern for the look. Nailing the intuitive user flow and content presentation is what we’re after here.

  • Plan the structure / menus & navigation
  • Create the pages for the core structure
  • Create custom post types and fields
  • Create and add loops / snippets to pages

Wireframes & markup


3.

Adding the Visuals and Graphic Design elements

This process is what most think of as the actual “Web Design”. I find that making the best websites this is actually a process dependent on the previous steps. Form to follow function as wiser people have said for time immemorable. The design process starts with rough visual additions and adding the content, then refining it with each round.

  • Sketch visual concepts
  • Create mockups
  • Live design
  • Add all content / Implement SEO targets
  • Finalize site


4.

  1. Launch & Monitor

  2. Finalize
  3. Monitor
  4. Refine
  5. Maintain

How I keep a project on track

Asana for tasklists.

Invision for communication of mockups.

Google Drive for client sharing files.

I try to be a bit more than just a website designer and front end developer.

I also manage VPS and website hosting. When I ran my little design studio in downtown Sisters, OR, I had a WHM Cpanel with over 100 accounts.