How to create the mockup your HubSpot COS developer wants to see

Posted by Sajeel Qureshi on June 13, 2016 at 2:05 PM

In website redesign, HubSpot

The process of designing and building a new website is long and complicated. It takes a lot of team work and a carefully planned collaborative process. For a smooth transition between marketer, designer and developer it is helpful to create processes and detailed documents to make life easy.

Two of the steps in your web design process should include the development of a wireframe to help with UI/UX and then the development of a mockup to make your design come to life often in PSD form.

If you are building a landing page or website in the Hubspot COS here’s how to create a wireframe and mock up that your HubSpot developer will want to see.

 

The difference between your wireframe and mockup

Wireframe
Think of your wireframe as your website layouts blueprint. This blueprint is used to help you understand how the website will achieve goals for your clients. In this stage you are focused on creating a website that drives conversion.

Mockup
Once your wireframe has been completed and finalized your designer gets to do their thing and turn the conversion strategy of your website into something visually appealing to your customers. This mockup will illustrate exactly what your website should look like for your developer. In this stage of design your designer or as a designer you can take certain steps to make make the transition from mockup to product for your HubSpot COS developer easier.

Build your mockup in Photoshop

For sharper more accurate design, create your wireframe in Photoshop or another imaging software, Photoshop is the standard.  Once you have your site exactly where you want it, you will be ready to send it to your developer. Photoshop will make it easier for your developer to splice your design into HubSpot. 

 

Be organized - create and label folders

Your developer will need to know what layers in your PSD correspond with which elements. When designing, arrange each design element into a folder by section. For example, the footer section of your website should be labeled footer. Naming each section will help the developer to navigate your design in an easy manner.

 

Words of wisdom

When you design a website in Photoshop or other visual platforms like Illustrator, it is important to be aware that some elements of your design may be difficult to transition to your actual website design. Code and Photoshop are not synonymous, elements like gradient effects, shadows and even fonts may not work online. You should be prepared to accept that some elements of your design may not translate and you and your developer will need to work together to find a solution that fits your design and is possible with coding.


Building a landing page or web page in the HubSpot COS takes an expert. If you are interested in outsourcing web development for HubSpot connect with a certified HubSpot developer below, to see how we can bring your design vision to life. 

free app development quote