Pre-Design Stage

The initial stage will set up the tone for scope, vision and procedures. The growth of every web designer will depend on how well they dedicate themselves to the pre-design stage. The following 4 steps should be reinforced along with every pre-design consideration.

Monk In Yoga Position

Identifying The

This is without shout one of the most important considerations for web design. Its high time web designers became an active part in the marketers’ meetings to gain the ultimate knowledge on business goals. Goals will guide the designer to build relevant websites for prospects.

Monk With Their Followers

Understand Your
Audience & Their Needs

Your preachings could have more impact if you provide a good and relevant ambience. Usability and utility will decide the success or failure of the website. Personas make valuable revelations that will help in determining background color, fonts, and images.


COS Certified

COS Certified experts are the abbot of HubSpot COS design. They understand the design manager from the core and could embed the marketer’s needs into the design and improvise when needed.

Monk In PC

Check Out Favorable
For Your Design

After talking to the marketer, do you feel that their vision and your creativity could be justified on the HubSpot COS platform? Are there certain functionalities that couldn’t be attained on HubSpot? Talk to the marketer.

Designing Stage Consideration: HubSpot COS

Now that you are aware about pre-design stage before the start of the tour, it's time now to see how to practically walk on the HubSpot COS path.

Create Template layout for your design files

(Example: Design in a 12 column grid layout)

The layout should be based on 12 column grid layout like Twitter's Bootstrap framework on which HubSpot COS is built. It is easy to drag and drop the modules in “Template Builder.” At one time designers could have maximum 12 modules on a single row.

All drag and drop templates automatically include a minimal CSS file (layout.css) that makes the grid responsive across different screen sizes. While the file is based on Bootstrap 2, it has been stripped down to include only the code that is necessary to make the rows and columns of your layout stack on mobile devices. 

choosing between symmetrical and asymmetrical

Which one is better for HubSpot COS?

Here is how you could determine



We term developing symmetrical designs on HubSpot COS as "What You See Is What You Edit" (WYSIWYE). That's because you could simply add the modules and customize their layout along with the content as the overall design is simplistic and is free for overlapping elements.



Overlapping and uneven placement of design elements causes editability issues. This example shows how complicated it gets when you want to edit the content of a particular module. When you select a module, you may get the content of a module that overlaps or underlays it. This editability constraint could affect the marketers, however a skilled COS developers will be able to overcome it.

Designing with Proximity

Bad Proximity

Bad Proximity

This is a bad kind of proximity and you couldn't even dream creating a website like this one on the HubSpot COS module based system. In HubSpot COS design manager all the elements are wrapped in a module and no two modules could overlap. The elements couldn't spread across 2-3 modules.

GOOD Proximity

Good Proximity

When designing in HubSpot COS it is vital for designers to follow a good proximity. This is because the design manager on HubSpot COS is based on modules, which makes it mandatory to maintain the flow of all the elements to supplement each other and reinforce the essence of the message.

3 Commandments of Responsive Design For HubSpot COS

Monk With Their Followers

Here are the answers to 3 key responsive design considerations for HubSpot COS:


By default all web templates that you create on the HubSpot COS platform are 100% responsive. However, you could customize the mobile layout to meet some specific requirements.


The inbuilt "Smart Content" feature helps you reach your targeted customers using mobile devices with tailored content that is developed to adapt to different screen sizes. Just feed the content into the Smart Content section and select it for responsive approach.


Customization is not a big challenge on HubSpot. HubMonks have figured out that you could either edit them in the modules or generate a JS script that could be customized to add interactivity. Click the links given below to read articles by HubMonks about getting interactivity on various components:

  • Adding Interactivity To Sliders
  • Working With Modules
  • Editability Hacks
  • Sample Interactive Forms
  • Creating Full Screen Webpages


Designers could work with modules in 3 ways on HubSpot

Standard Modules

For the most commonly used elements of the webpage, you could use the standard modules. HubSpot provides in-built modules so that you don’t have to create these elements. Customization with these modules is quite simple.

Custom Modules

You could create your own customized module that could be placed at your desired web pages. This is the best option for those who don’t want to be restricted to the standard modules pre-built in HubSpot.

Global Modules

When you make a global module, such as a header, you don’t have to create the same element for each webpage on the site. The same elements will appear across all the pages where a global module has been applied.

interactivity elements

There is limited scope for interactivity on HubSpot COS. However, at HubMonks we have discovered the best practices to include or limit interactivity for optimal performance.

  • Navigation

Does HubSpot support mega menus or interactive menus?

JS skills could be implemented to develop interactive mega menus on the COS platform. Mega menus could also be created on HubSpot COS.

  • Form Icon
  • Forms

It is tricky to develop forms with multiple background on HubSpot COS. It could be achieved with the help of skilled scripting resource to customize the form module. The same applies to forms with custom messages.

  • jQuery Grids

These grids are used for galleries or portfolios. It supports basic grid operations like inserting, filtering, editing, deleting, paging, and sorting. Basic HTML knowledge is essential to add these grids.

  • Media

You could add media on HubSpot COS without writing complicated codes. They could be directly inserted into the modules. At page level it is very easy to upload all types of media. This requires the Hubl code expertise.

  • Sliders/Banners

If you are planning to add videos into your slider modules, you will need custom development expertise.

  • Social Modules

You don’t need to create a different code for social media sharing and following as they are in-built in the COS platform. However, for some platforms like Pinterest you will have to create a custom code.

  • Call-To-Action

Calls-to-action could be created as global modules so that they could be utilized on multiple pages.


When combined with the best practices of web designing, the HubSpot design considerations given in this infographic will help you leverage the most out of the advanced web development platform. The MONK becomes stronger with these considerations to create a practical design that has all the right elements of inbound marketing success.

Download the list of inevitable design considerations for your next HubSpot COS web development project

Mission Form
Bottom Small Tree