A website for your business should have two important attributes: efficient functionality and an eye-catching and user-friendly design. A website will not be effective if it excels in just one aspect and lacks the proper attributes for the other. So, it all boils down to design and code – a combination a few people can exhibit within a single persona.
Luckily there is WordPress and there is Photoshop. One is known as a top-of-the-line tool for creating amazing images and design elements, while the other is a well-known open-source content management and website building platform. There are currently 14.5 billion pages read by 409 million people – and that’s just the cloud-based WordPress.com blogging platform. An equally staggering figure would most probably be registered by users of the self-hosted WordPress.org platform.
Adobe Photoshop is used by animators, architects, fine art photographers, graphic designers, illustrators, medical professionals, photographers, publishers, scientific researchers, tech communicators, and of course web designers – making it the most popular and most widely used digital imaging software. Combining the imaging power of Photoshop with the functionality of WordPress, and you’ll come up with all the attributes you would want in a website.
To achieve this, you need to design your website and create a mockup using Photoshop. After that the PSD, or the Photoshop Document files, are then converted into a WordPress theme. The following guide will show you the process of building and creating a customized website for your business from PSD design creation to WordPress Conversion.
1. Initial Design Concepts Creation
Building a custom website starts by setting your unique design using Photoshop. You can use this imaging tool to create important website elements that include the following:
Design Your Logo
If you don’t have one yet, then it’s probably best to start by designing your logo. It is the graphical representation of your business and the first concrete step to establish good branding. The well-known “I love New York” logo designer Milton Glaser has this to say about the importance of the logo design for your business:
“You want to move the viewer in a perception so that when they first look at [the logo]…they get the idea, because that act between seeing and understanding is critical”
Design Your Background
The background is the base or backbone of your website, the staging point from where your website theme would emanate from. There are several possibilities and choices that you can make use of when designing your background. Smashing Magazine provides a good guide that describes the best practices in background design including Basic Background Structures, Wrapper/Header Backgrounds, Seamless Tiles or Repeat Backgrounds and Full Body Backgrounds.
Design Your Navigational Aids
Navigation icons, search functions and other aids are very important website elements that you should also include in your design. Aids that guide visitors to pages, posts and other sections of your website can be really graphical in nature for better visibility.
Design Other Website Elements
You should also incorporate in your website design other graphical and visual elements that will enhance the functionality of your site. These include sliders, social media icons, post-related functions, comments areas, and other important sections of the site.
One important thing to remember though when designing these graphical web elements is the fact that your content is still the most important item in your WordPress site. Greater attention should be accorded to it by your audience. Other web elements should be designed in a way that can enhance your content – and not steal the limelight away from your main content.
2. Initial Review of the Design Concepts
Whether you’re building a WordPress site from PSD files for your business or for a customer, the initial design concepts should be carefully reviewed by decision makers in your company or your client. Many make the mistake of neglecting or disregarding this critical step that will help avoid costly mistakes in the future.
As a general rule, websites should be both visually appealing and usable in order to give a great user experience for your visitors. You should have these attributes in mind when you design your website using Photoshop. Other characteristics of good, user-friendly website as defined by Social Media Today are listed below:
Your Website Should be Mobile Compatible
A responsive or mobile-friendly website can make it easier for mobile users to view your site on their smartphones, tablets and other web-enable mobile gadgets.
Your Website Should be Accessible to All Users
By following the guidelines set in the 508 Website Accessibility Standards, you can design a website that is user-friendly and accessible even to the elderly and persons with disabilities.
Your Website Should have a Well-Planned Information Architecture
Your content and the information you present is very important for the success of your website, and your business, so make sure that the presentation of these elements are well planned and presented in a very organized architecture.
Your Website Content Should be Easy to Scan
Website visitors usually scan pages first before actually committing time to read through your content. Your content should have a layout that cater to this behavior, like breaking up blocks of text to easily readable portions and making use of very understandable headings and sub-headings.
Your Website Should Have Fast Loading Times
In a fast-paced online world, websites that takes forever to load gets easily abandoned by website visitors who can easily move from one site to another with a click of a button. A good rule of thumb is to have website pages that completely loads within 4 to 6 seconds.
Your Website Should be Consistent with All Browsers
Online users make use of all varieties of web browsers. So, it would be to your greatest advantage to design a website that would be compatible and would appear consistently if viewed from most of the popular website browsers.
Your Website Should Have Good Navigation
One of the most frustrating things about poorly-designed websites is poor navigation, making it hard for users to find information or work their way through various sections. Make sure you design your site with ample navigational, menus and search tools.
Your Website Should Have a Good Error Page
Website owners often neglect the importance of designing good error pages and messages. This is one way of providing a good user experience as well as establish better branding.
Your Website Should Have a Good Color Scheme
Using a good, contrasting color scheme can make it easier for your website visitors to understand your content well, particular with respect to your content text and your background.
Your Website Should Have Properly Designed Forms
Forms are important for your website and business so make sure that your forms are properly designed to be easily understandable and usable – for these forms are your gateway for getting directly in touch with your targeted audiences.
3. Revisions (As Necessary)
The secret to optimization and perfection is constantly reviewing what you have done, making corrections, or revising any elements as necessary for improvement. The same principle applies to designing your website, whether you’re creating one for your own use or for a client. Make revisions to your PSD files as necessary before taking the next step – converting them into WordPress.
4. Design Conversion to WordPress
This may seem like a daunting task from the perspective of someone who have virtually no HTML/CSS coding skills, but making use of PSD-to-Wordpress conversion tools will make the task a lot easier. One of the most popular among these tools is Divine Elemente, used by more than 40,600 web designers.
In general, the whole process of PSD to WordPress conversion is to transfer a website element from your PSD files into an HTML and CSS file format that will match the file structure of a typical WordPress theme. This is done by either using the conversion tool and utilities, or by manually doing the conversion process yourself using the following steps:
Slicing
Literally, the term “slicing” means cutting and dividing, so basically this is what is being performed in this process step – cutting and diving your design files into individual design components. This is because WordPress will treat each design element as a separate web element. Graphic and image processing tools and applications are used to separate each of these elements.
Photoshop makes this easier though because each design element can be placed in individual and separate layers, making them easier to separate and processed individually. A particular WordPress template contains the following web elements:
- Backgrounds and Other Visual Elements
The background can be extracted as an image file from the PSD design file by placing it as a separate layer. This is extracted by saving it as an image file while other layers are disabled. Other visual elements can also be extracted using this manner and saved as separate graphic elements.
- Headers and Separators
Headers and separator areas can be extracted from the PSD files by using the crop tool and saving it as an image file according to appropriate web dimensions.
- Footers and Others
The footer area and other remaining parts of your website design can be extracted by either the marquee and crop tool, or through the separate layer approach, then saving them as separate image files.
Creating the Index.html and the Style.css
Each of these “sliced” or separated PSD elements are then converted into individual files in the HTML or XHTML format. These are then styled using the CSS (Cascading Style Sheet) format. You can make use of whatever software or application you have available to create HTML and CSS files, but the more popular ones include Kompozer (Open Source) and Dreamweaver (Paid). If you want to learn more about creating HTML and CSS files, the following useful resources will put you in the right path.
W3Schools – If you’re a web developer, this site will be a good resource to learn programming in CSS, with lots of coding examples plus an online compiler.
TutsPlus – This site provides good and free HTML and CSS programming video tutorials.
Mozilla – You can get step by step guides and tutorials from this developer site, powered by Mozilla Firefox’s open source community.
CSS Basics – This site is good for beginners who want to learn the basics of CSS.
WordPress – Get a comprehensive and very complete guide on coding with CSS powered by the WordPress community itself.
Creating the WordPress Theme File Structure
Once you’ve completed the index.html file, you can break it down to the individual file structures that make up a standard WordPress theme. Typical PHP files that make up a standard WordPress theme include:
- archive.php
- header.php
- footer.php
- index.php
- single.php
- page.php
- sidebar.php
- category.php
- search.php
- 404.php
- comments.php
- comments-popup.php
Adding WordPress Inbuilt Function Tags in the Theme Files
Each theme file has specific functions and purposes, and WordPress makes it easy to activate these functionalities by simply by adding the WordPress inbuilt function tags into these files.
To learn more about each of these functionalities and tags, you can refer to the following resources provided by WordPress:
- Function Reference – Provides detailed description of each of these functionalities with examples for your reference.
- Template Tags – Provides a full list of all WordPress function tags and their description.
Once these tags are added to the files, they are them compiled into a single themes folder that will be part of the WordPress installation process. These theme files can then be activated through the WordPress dashboard.
Adding More Functionalities
The theme files provide the basic functionalities of your WordPress platform. If you need more functionalities that perform specific tasks or actions, you can make use of plugins and add ons that can be set-up and activated through the WordPress dashboard.
5. Setting Up, Adding Content and Testing Your WordPress Installation
After your theme files are completed and properly tagged with functionalities, you can then install WordPress through your hosting resources, after which you can then activate your theme and start customizing. The procedure for installing WordPress is easy and very straightforward, which you can learn from the WordPress.org site. After activating your theme, add your preliminary content to each of your pages and sections. Test each element if they appear and are functioning according to your intended design and plans.
6. Go Live!
Once everything is set in their proper place and every element is tested for their functionality, you can then populate your new WordPress site with more appropriate content and then – Go Live!
WordPress is a very useful and easy-to-use website platform that many business owners and digital marketers can use to create a very strong website presence for their brands and businesses. Using the power and functionality of WordPress then enhancing this with the design prowess of Photoshop, you can create a very powerful and very visually stimulating website that can boost your digital marketing campaign.
Jomer B. Gregorio is a well-rounded expert when it comes digital marketing. Jomer is also known as a semantic SEO evangelist and practitioner. Check out our Digital Marketing Services today and let us help you in achieving positive and profitable results for your business.