--- title: How to create the mockup your HubSpot COS developer wants to see description: Tips and advice on how to create a website mockup for your HubSpot COS developer. image: https://www.computan.com/hubfs/husbpot_developers-1.jpg --- [Skip to main content!](https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see#main_content) [![Computan Logo](https://www.computan.com/hs-fs/hubfs/computan-site-logo.png?width=250&height=50&name=computan-site-logo.png) ](https://www.computan.com/) # How to create the mockup your HubSpot COS developer wants to see 2 Minutes Read   |   June 13, 2016 - [Tweet](https://twitter.com/share) The process of designing and [building a new website](https://www.computan.com/the-most-important-elements-of-a-website-redesign) 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](https://www.computan.com/services/) 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](https://www.computan.com/technologies/) below, to see how we can bring your design vision to life.  [![free app development quote](https://no-cache.hubspot.com/cta/default/482618/f776a026-6ffb-4b25-94da-3a1e77361cf1.png)](https://cta-redirect.hubspot.com/cta/redirect/482618/f776a026-6ffb-4b25-94da-3a1e77361cf1) Tags Label: [HubSpot](https://www.computan.com/blog/topic/hubspot) ![Sajeel Qureshi](https://www.computan.com/hs-fs/hubfs/Images/Sajeel%20Qureshi%20headshot1.jpg?width=132&height=132&name=Sajeel%20Qureshi%20headshot1.jpg) ### About Author [Sajeel Qureshi](https://www.computan.com/blog/author/sajeel-qureshi) Hi, I'm Sajeel and I head up the day-to-day operations at Computan. I don't do anything in particular and lend a hand to other people who might need it. I came to Computan after failed stints as a tennis player (no talent), musician (no skill) and backyard wrestling manager (underqualified). [![How to effectively manage an outsourced web development project](https://www.computan.com/hubfs/project_management.jpeg) Previous Post #### How to effectively manage an outsourced web development project ](https://www.computan.com/blog/how-to-effectively-manage-an-outsourced-web-development-project) [![5 things to know about your design and HubSpot templates](https://www.computan.com/hubfs/HubSpot.png) Next Post #### 5 things to know about your design and HubSpot templates ](https://www.computan.com/blog/5-things-to-know-about-your-design-and-hubspot-templates) ### Better Lorem Ipsum Generator Better Lorem Ipsum Generator is yet another dummy content generator for HubSpot. ### Subscribe Here! ### Recent Posts ### Posts by Tag - [HubSpot (177)](https://www.computan.com/blog/topic/hubspot) - [Blog (114)](https://www.computan.com/blog/topic/blog) - [Computan Team (90)](https://www.computan.com/blog/topic/computan-team) - [Web Development (84)](https://www.computan.com/blog/topic/web-development) - [Ecommerce (62)](https://www.computan.com/blog/topic/ecommerce) - [WordPress (61)](https://www.computan.com/blog/topic/wordpress) - [Integrations (44)](https://www.computan.com/blog/topic/integrations) - [Web Design (38)](https://www.computan.com/blog/topic/web-design) - [RevOps (28)](https://www.computan.com/blog/topic/revops) - [App Development (20)](https://www.computan.com/blog/topic/app-development) - [Featured (1)](https://www.computan.com/blog/topic/featured) - [Shopify (1)](https://www.computan.com/blog/topic/shopify) [See all](https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see#) ```json { "@context" : "https://schema.org", "@id" : "https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see#webpage", "@type" : "WebPage", "about" : { "@id" : "https://www.computan.com/#organization" }, "breadcrumb" : { "@id" : "https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see#breadcrumb" }, "isPartOf" : { "@id" : "https://www.computan.com/#website" }, "name" : "How to create the mockup your HubSpot COS developer wants to see", "primaryImageOfPage" : { "@type" : "ImageObject", "url" : "http://digitalmarketing.computan.com/hubfs/husbpot_developers-1.jpg" }, "url" : "https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see#blogposting", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Sajeel Qureshi" }, "dateModified" : "2024-01-05T07:36:53+0000", "datePublished" : "2016-06-13T18:05:52+0000", "description" : "Tips and advice on how to create a website mockup for your HubSpot COS developer.", "headline" : "How to create the mockup your HubSpot COS developer wants to see", "image" : "http://digitalmarketing.computan.com/hubfs/husbpot_developers-1.jpg", "mainEntityOfPage" : { "@id" : "https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see#webpage" }, "publisher" : { "@id" : "https://www.computan.com/#organization" } } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see#breadcrumb", "@type" : "BreadcrumbList", "itemListElement" : [ { "@type" : "ListItem", "item" : "https://www.computan.com/", "name" : "Home", "position" : 1 }, { "@type" : "ListItem", "item" : "https://www.computan.com/blog", "name" : "Blog", "position" : 2 }, { "@type" : "ListItem", "item" : "https://www.computan.com/blog/how-to-create-the-mockup-your-hubspot-cos-developer-wants-to-see", "name" : "How to create the mockup your HubSpot COS developer wants to see", "position" : 3 } ] } ```