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, elementor, and PhotoShop and wp toolset. That’s all I need for most projects, not a hundred rando plugins.
This approach empowers me to create everything from a full-fledged web-app with many-many dynamic structures to a simple brochure website.
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 hi-fi wireframes that map out every function, loop, and block is my favorite task in the whole development process.
Website Development Pipeline
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 in a spreadsheet.
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 a template for each page type
- Create custom post types and fields
- Create and add loops / snippets to pages
Wireframes & markup
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.
The design process starts with rough visual additions and adding the content, then refining it with each round. You’ll notice it’s starting to resemble an actual website….starting to.
- Sketch visual concepts
- Create mockups
- Live design
- Add all content / Implement SEO targets
- Finalize site structure and main elements
Polish, Launch & Monitor
Now we get to have fun. We add the images, dial in our fonts and header images and pretty much refine everything that we’ve added in the previous steps.
- Proof all the text,
- Double check the forms and emails
- Double check SEO and marketing deets
- Create backups and fresh staging area
- Website training and documentation
Now we launch!
How I keep a project on track
I like InVIsion for project management. I also like google drive, and asana.
I try to be a bit more than just a website designer and front end developer.
I also manage VPS and website hosting via WHM and CPanel.