Web Development

In this section I’ll show you my workflow, the web development stages common to almost all Internet projects I do.

Server Configuration

The first step of web development, the helping to the client to choose a good hosting company, is often overlooked by the designer. Be attentive to this detail is very important as a good server and its basic requirements depends on the operation of all PHP and HTML modules (among others) that the website will have.

A good quality server always maintains its versions of PHP, mySQL database updated. Also allows FTP access and settings, the creation of multiple email accounts, MySQL management for creating database tables, all ISS services, multiple document roots for one domain and more. This must be performed by a control panel with a user-friendly interface.

CMS Installation

The CMS is the platform that allows, among other things, that a web page is maintained by the customer. Installation depends very much on how the chosen server is configured and updated, both in terms of levels of security tools available. As we ‘ve seen before, a good server is an updated server, however if we want to work with WordPress as CMS we have to take into account the following requirements:

WordPress server requirements for Version 3.2 (June 30, 2011):

• PHP version 5.2.4 or greater
• MySQL version 5.0.15 or greater
• (Optional (required for multi-site)) Apache mod_rewrite module (for clean URIs known as Permalinks)

First of all, we must create a database table with a name and password. WordPress allows secure installation if you change some parameters that are often forgotten. Changing the default name admin through given MySQL database is one of the insurance to be worthwhile. Last but not least, the perfect WordPress setup through its user management settings, permanent links for being SEO friendly among other things.

Wireframe and site diagrams

Few designers “waste time” by making a wireframe, a draft design of the web page requested by the client, a piece of “design” without any high level graphic precision of the content but that helps the reaching of the final design. On this level we don’t care about items such as fonts, colors and brand identity.

The lack of this powerful stage of creation is forgotten in the vast majority of Internet projects. In addition to its substantial time saving, client and designer can make a deeper analysis of what is really needed in the final product. Between its advantages we can list the following.

• Improve communication between designer & client: the development of a web page starts before the making of the design files, and must conform to the real needs and identity of the client. During the “design” phase of the wireframe the closest relationship and dialogue are critical, because this is the time to discuss the interface changes.
• Time saving: creating a wireframe is much less time expandable if compared to all high-quality graphics that are presented in a final design project. This time saving translates into productivity for the designer and the customer.
• Versatility: with the draft framework in hand, the designer can use any design concept; even reuse the same wireframe for a future new design if required.
• Functionality: with wireframes the designer analyzes the project into two parts, the functional and visual, separately.
• Avoid common mistakes: in the wireframe creation level the client can visualize the interface, a rough but comprehensive structure of the web page, before the more elaborate design process starts. It’s time to choose features like number of columns, width of the header, the footer information, the position of the main navigation, among other things to avoid any feel of dislike after the web site publishing.

Design screens

The process of designing a web site is much more complex than it may initially appear. At this stage we must take into account many technical details as aesthetics, branding and market positioning. We have to take time to choose fonts, colors that are consistent with the client’s visual identity, marketing concepts, and how making the navigability and the user experience.

The client is part of all stages of the process, until final approval of the proposed design, allowing the likely changes and adjustments to the smallest details are made from less expensive way possible. The final project will be assembled in layers and always in file extensions as .PSD or .PNG for being suitable with programs like Adobe Photoshop or Adobe Fireworks.

Customer Support

Although CMS platforms are quite intuitive, allowing users to very easily use and manage his content, initial support is critical for customers to take fully control of the tools.

Overcoming constant external dependency for the maintenance of their website is also a very important stage of the process. It is essential that customers understand and can adapt independently to the use and enjoyment of the information technology they are buying.

Paulo Ramalho Design – Handmade Websites.