At WDCL we have been working with Drupal for more than 10 years, providing Web Design and Development services to companies, organizations, agencies and consultants.
As we have seen in other posts, Drupal is a very flexible and powerful CMS that allows you to build websites from scratch, allowing easy content management, incorporation of new features and sustained scalability over time. In other words, if the project requires it, large, robust and secure websites can be built with Drupal.
What are the stages involved in designing and developing a website from scratch?
Depending on the project we can think of five or six stages:
- Definition of the objectives of the website and therefore of the functionality
- Information architecture (types of content, fields, menus, blocks, views)
- Wireframes (basic visual presentation to show the layout of the main pages of the site)
- Mockup design (advanced graphic presentation and deliverables in PDF or JPG format)
- Implementation in Drupal – Design and Development
- Testing – Settings
We are now going to expand each stage a little more:
Stage 1: Defining the objectives of the website
Together with the client, the objectives are defined and reviewed. An institutional website with only company information is not the same as an e-commerce website with product sales or a site for enrollment in courses. Not to mention if it is a newspaper, magazine or blog style digital medium. We must take into account the purpose of the site, the public and the general objectives to have a horizon of the type of development to be carried out and what is the best way to face it.
Stage 2: Information Architecture
It consists of assembling a document where the main menu items are listed, the types of content that the site is going to have, what the fields of those types of content are going to be (images, files, videos, etc.). The objective of this stage is to have a “map” of the information of the site and to have a good base to move on to the next stage.
Stage 3: Wireframes
It consists of the assembly of the layout of the main screens. Where does the logo, the menu, the information blocks, etc. go? In this instance, neither visual nor aesthetic appearance is analyzed. But if structure. Since the arrangement of the elements is assembled on the home and on the most important pages of the site. As the result of the wireframes, you will have a good base to move on to the design. We will know if the site has one column, two columns, three columns, etc.
Stage 4: Mockups
The mockup stage consists of defining the graphic design of the website. Using the wireframes as a reference, we proceed to design the visual elements of the site.
The number of screens to design will depend on each project.
Depending on the work, the design of the site can be made to measure (where the mockups are developed with the design that the client requests and each page is perhaps more customized), or it can be from an existing template (either in Drupal .org or a premium Template). The advantage of the second option is to save development time and costs. And in the case of buying a template, the mockup stage would be skipped.
The result of this phase will consist of one or more deliveries with JPG or PDF files where the design of the site will be seen in full color, fonts used, icons and other visual elements.
Stage 5: Implementation in Drupal
Both development and design. We work on the entire assembly of the site in Drupal, initial configuration of development environments, assembly of content types, fields, views, blocks, user permissions, installation of modules and their configuration.
At the same time, progress with the implementation of the design (what was designed in the mockups) now has to be reflected in the developed website. This is known as Theming and consists of styling using CSS to achieve the desired visual appearance.
Stage 6: Testing – Adjustments
After the entire site is implemented, the testing stage comes to see that everything is configured correctly, that the site is properly displayed in browsers, on mobile devices, etc. During this stage the final adjustments of the project are also made.
The stages mentioned above are a general guide that allows us to provide predictable results through an orderly work process for both ourselves and our clients.
At Drupal Soul, we offer the service of web design and development with Drupal. But we also provide other services such as maintenance, migration, support or consulting.
If you need to carry out a project with Drupal, you can contact us through the contact form and we will be answering you as soon as possible.