WordPress and Basic Website Design steps and tools

Basic Website Design steps and toolsDesign steps and tools that I use when I design a website for my clients.
Design encompasses a lot. So where to begin??


I first listen, ask a few questions and then listen some more. I feel getting to know the company and what they really want or expect from a website. This is so important and it is before I actually start the design and user interface process.


I also find that I am here to educate my clients along the way. Sharing my knowledge is a big part of my job, and letting them decided which steps will really work for them. I also get an education on their company and I tell you it really helps with inspiration on the design side if I am informed.

Wire-framing and Flow charts

I go to my note pad and layout a wire-frames to a simple User Interface. I work with my client to determine the flow of the website. So we come up with a flowchart, and this determines how we want to lead people around (the navigation) the website. We determine what are the important parts that need to be focal points, on the website. This process of designing the user interface and flow of the website is a back and forth process. It might take time to nail down the UX and UI, but it is a crucial step.

UX and UI

I work from the wire-frames and flow charts to create user experiences and user interfaces that allow users the able to navigate the site to the information they want or need. And, isn’t the most clients main goal; to give their consumer a way to find information or products on their site. I feel good user experience through design can be view on mobile devices and website with equal ease. I try produces websites that are pleasing to view as well as serve the function of informing the consumer.


Then, I start the creative process (fun part), I look for things that inspire me,

searching for inspiration

searching for inspiration

relate to my clients needs. I get to go crazy with colors schemes and web design styles. I have been one of the Old school designers that created two or three mockups of a site in Illustrator or Photoshop, and then let the client pick the design they liked best. But, now this is changing with the new way of setting up a site design with Style Tiles. This give the client a less set in stone approach to the website design. Review this Style tiles website by Samantha Warren for more details. Basically you give them a color scheme and fonts some create layout frames of the site. You show them what each of the parts of the site will look like in a page of Header tags with defined fonts and color, Swatches of backgrounds textures and color schemes and where they will be use throughout the site. It is not a page designed in PSD of that actually home page or blog page.


I like to use style tiles and I even some create Photoshop files if the client want a more defined page setup.
To create this style tiles I use Kuler and Subtle patterns to find color schemes, and textures that can be used on the site. I find giving my client consistency and continuity in scheme color, fonts and textures, throughout their websites give the end user a more enjoyable experience.
NOTE: If you are not a Photographer and you want some great quality photos to use there are a lot of royalty free Photos sites out there, I Like I-stockphoto
Here, I have completed giving you my basic website design steps and tools, and I hope you have found some new tools that you can use in designing your websites.

NEXT—Develop into a WordPress website

Now, after your client has signed off on the flow, wire-frames and design specification. So, time to take all this information and pass it to a developer or start developing the website yourself, and this is where I will start my next blog post.