--- title: What Makes a Great Website description: A great website is a symbiosis of design and technical mechanics. Here are the steps our team follows when starting a new web design project. image: https://success.inturact.com/hubfs/blog-images/What_Makes_A_Great_Website.jpg --- [Skip to content](https://success.inturact.com/blog/what-makes-a-great-website#main-content) Close - [Blog](https://success.inturact.com/blog) - [Resources](https://www.inturact.com/resources) - [About Us](https://www.inturact.com/about-us) - [SaaS Journey](https://www.inturact.com/the-saas-marketing-journey) SEARCH [![Get on Our Waitlist](https://no-cache.hubspot.com/cta/default/333468/d4e5dbd1-1693-4aa8-858b-dd9fccb9189c.png)](https://cta-redirect.hubspot.com/cta/redirect/333468/d4e5dbd1-1693-4aa8-858b-dd9fccb9189c) [![Inturact-logo-7-pad](https://success.inturact.com/hubfs/Inturact-logo-7-pad.svg)](https://success.inturact.com?hsLang=en-us) - [Blog](https://success.inturact.com/blog) - [Resources](https://www.inturact.com/resources) - [About Us](https://www.inturact.com/about-us) - [SaaS Journey](https://www.inturact.com/the-saas-marketing-journey) [![Get on Our Waitlist](https://no-cache.hubspot.com/cta/default/333468/d4e5dbd1-1693-4aa8-858b-dd9fccb9189c.png)](https://cta-redirect.hubspot.com/cta/redirect/333468/d4e5dbd1-1693-4aa8-858b-dd9fccb9189c) Quick results for "{search\_term}" ![](https://success.inturact.com/hs-fs/hubfs/blog-images/What_Makes_A_Great_Website.jpg?width=300&name=What_Makes_A_Great_Website.jpg) [Grant Hatfield](https://success.inturact.com/blog/author/grant-hatfield)7/28/15 12:47 PM3 min read # What Makes a Great Website [Previous](https://success.inturact.com/blog/hubspot-cos-vs-joomla?hsLang=en-us) [Next](https://success.inturact.com/blog/know-your-customer-signs-that-you-have-persona-problems?hsLang=en-us) ![What_Makes_A_Great_Website](https://success.inturact.com/hubfs/blog-images/What_Makes_A_Great_Website.jpg)A great website is not always successful. Likewise, a successful website is not always great. To be clear, from a designer's perspective, a great website has nothing to do with site metrics and traffic (although those do need to exist to make the website successful). A great website is a symbiosis of design and technical mechanics. Just as in nature, these two aspects gain mutual benefit from the other being done well, and correctly. Here are the steps our team follows when starting a new [web design project](https://works.inturact.com/?hsLang=en-us). --- ## 1. Start with Research ### **Research the topic:** Whether for a personal project or for a client, researching the topic avenue will help you establish the visual direction for your project. In general, creative sites will differ greatly in structure from corporate websites, E-commerce sites will look differently from informational sites, and so on. Knowing your topic will allow you to better know your audience, which will help you better structure your new site. ### **Research great websites:** This stage is both fun and daunting. Without a doubt, you will come across [amazing websites](https://maxiblocks.com/) that you couldn’t dream of making. Don’t let that bring you down; use the fuel to launch your own creativity. Here is a [great website](http://www.awwwards.com)for new ideas! ### **Research new web trends:** This step breaks into visual trends and technical trends. - What is the current most used website width? - Which [fonts](https://tools.picsart.com/text/font-generator/) are new, or most used? - Do people still utilize drop shadows? These are the types of questions you could ask in reference to new web trends. One of our go-to resources is [graphicdesign.stackexchange.com](http://graphicdesign.stackexchange.com/). [(Click to Tweet!)](http://ctt.ec/5XfGq) You can ask questions, look up answers, and exchange ideas for free. Another good practice is to research Technical trends to see how far you can go with a design. If you aren’t planning on programming your site because you will use, for example, an [AI website builder](https://webwave.me/ai-website-builder), no need to worry about this part. However, if you are, here are some questions to ask yourself: - What is the new CSS version capable of? - Are there any tags that are depreciated? - Is Flash finally supported on mobile? (Not really)  --- ## 2. Plan for Success   ### **Wireframe the website:** Wireframes lay the foundation for the future design. [(Click to Tweet!)](http://ctt.ec/Li64b) During this step, organize your major elements into blocks using simple shapes. There are several ways to wireframe a website. Two tools we use are notebooks and Google. Notebooks are a great way to quickly jot down ideas and layouts without needing a computer. On the other hand, Google has a pretty decent way to wireframe websites with Google Drawings located on Google Drive. [(Click to Tweet!)](http://ctt.ec/yV590) ### **Block out the wireframe:** Time to take your wireframe into Photoshop. Using the wireframe in conjunction with all your compiled research, it's time to lay out the wireframe into various flat color blocks. Don't be alarmed if you diverge from the original wireframe; it really only serves as visual training wheels.  --- ## 3. Execute your Plan. ### **Refine block out elements:**   Now you're ready to bust out the main visual components. > **Side note:** If you are going to be a web designer, you need a stock photo account. [(Click to Tweet!)](http://ctt.ec/Ef1a7) Large background photos are “in” and we don’t think they’re going away. Also pulling images from Google will get you into trouble fast. At Inturact we use [bigstockphoto.com](http://bigstockphoto.com). Using an established color palette, you can rework the block out colors, add imagery, and establish font sizes and selections. Use imagery to break up the flow of content and keep the eyes of the user moving. ### **Add Details:** This is where you get the chance to add fine details and re-work some areas of the blocked out elements. An eye for spacing is essential for this step. You don’t have to fill every section with content; often times that just creates an overwhelming visual obstacle for the user. Subtlety is the way to go. Not everything needs a drop shadow, outline, or pattern. Here's a website example for [great subtle background images](http://subtlepatterns.com). --- ## 4. Very Important Final Step ### **Walk away:** When you open up the layout again you may have some new ideas and notice details overlooked previously. Don’t become a Leonardo da Vinci though, it’s okay to finish your piece and move on. Do use [web design testing tools](https://testsigma.com/blog/7-top-tools-for-responsive-web-design-testing) to check the responsiveness of the website. --- Well, how did you do? We'll be more than glad to take a look at your site design and marketing efforts. Complete the form below for a free assessment. We'll share marketing tips and suggestions tailored just for you. [![Get A Free Inbound Marketing Assessment](https://no-cache.hubspot.com/cta/default/333468/609b42c7-2b61-4406-a7e7-9c26e9971a8c.png)](https://cta-redirect.hubspot.com/cta/redirect/333468/609b42c7-2b61-4406-a7e7-9c26e9971a8c)   ![avatar](https://success.inturact.com/hs-fs/hubfs/images/nXpkN8eL.jpg?width=290&name=nXpkN8eL.jpg) [Grant Hatfield](https://success.inturact.com/blog/author/grant-hatfield)Check out all of the latest marketing blogs written by Grant Hatfield, Creative Lead & Developer at Inturact. [mailto:ghatfield@inturact.com](mailto:ghatfield@inturact.com) ## RELATED ARTICLES [![Inturact_logo_no-icon_white](https://www.inturact.com/hubfs/Inturact_2022/IMG/Inturact_logo_no-icon_white.svg)](https://success.inturact.com?hsLang=en-us) Inturact is a data-driven growth agency for SaaS companies. We leverage advanced analytics and data science to optimize your customer journey, from acquisition to retention. Our tailored strategies and execution playbooks drive sustainable growth, turning insights into measurable results across all stages of your funnel. Explore - [Blog](https://success.inturact.com/blog) - [Our AI Stance](https://www.inturact.com/ai-stance) - [The SaaS Marketing Journey](https://www.inturact.com/the-saas-marketing-journey) - [Actionable Metrics](https://www.inturact.com/actionable-metrics) Company - [About Inturact](https://www.inturact.com/about-us) - [Write for Us](https://www.inturact.com/write-for-inturact) - [Contact Us](https://www.inturact.com/about-us/contact-us) - [Our Data Science Partner](https://www.inturact.com/innertrends-partnership) - [Inturact Capital Fund](https://capital.inturact.com/) Copyright © Inturact All Rights Reserved | [Privacy Policy](https://www.inturact.com/privacy-policy?hsLang=en-us) | Phone: 877.519.0555 ![Twitter](https://analytics.twitter.com/i/adsct?txn_id=l4khz&p_id=Twitter) ![Twitter](https://t.co/i/adsct?txn_id=l4khz&p_id=Twitter) ![Google DC](https://googleads.g.doubleclick.net/pagead/viewthroughconversion/964803482/?value=0&guid=ON&script=0) ```json { "@context" : "https://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "", "addressLocality" : "Houston", "addressRegion" : "TX", "postalCode" : "77080", "streetAddress" : "12333 Sowden Rd." }, "knowsLanguage" : "en-us", "logo" : { "@type" : "ImageObject", "url" : "https://www.inturact.com/hubfs/inturact-logo.png" }, "name" : "Inturact", "url" : "https://success.inturact.com/blog/what-makes-a-great-website" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "abstract" : "A great website is a symbiosis of design and technical mechanics. Here are the steps our team follows when starting a new web design project.", "author" : { "@type" : "Person", "name" : "Grant Hatfield" }, "dateModified" : "August 27, 2024 12 PM", "datePublished" : "July 28, 2015 5 PM", "headline" : "What Makes a Great Website", "image" : "http://cdn2.hubspot.net/hubfs/333468/blog-images/What_Makes_A_Great_Website.jpg", "inLanguage" : "en-us", "keywords" : "[Web Design, Marketing Strategy]", "mainEntityOfPage" : { "@type" : "WebPage" }, "name" : "What Makes a Great Website", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.inturact.com/hubfs/inturact-logo.png" }, "name" : "Inturact" }, "text" : "A great website is not always successful. Likewise, a successful website is not always great. To be clear, from a designer's perspective, a great website has nothing to do with site metrics and traffic (although those do need to exist to make the website successful). A great website is a symbiosis of design and technical mechanics. Just as in nature, these two aspects gain mutual benefit from the other being done well, and correctly. Here are the steps our team follows when starting a new web design project. 1. Start with Research Research the topic: Whether for a personal project or for a client, researching the topic avenue will help you establish the visual direction for your project. In general, creative sites will differ greatly in structure from corporate websites, E-commerce sites will look differently from informational sites, and so on. Knowing your topic will allow you to better know your audience, which will help you better structure your new site. Research great websites: This stage is both fun and daunting. Without a doubt, you will come across amazing websites that you couldn’t dream of making. Don’t let that bring you down; use the fuel to launch your own creativity. Here is a great website for new ideas! Research new web trends: This step breaks into visual trends and technical trends. What is the current most used website width? Which fonts are new, or most used? Do people still utilize drop shadows? These are the types of questions you could ask in reference to new web trends. One of our go-to resources is graphicdesign.stackexchange.com. (Click to Tweet!) You can ask questions, look up answers, and exchange ideas for free. Another good practice is to research Technical trends to see how far you can go with a design. If you aren’t planning on programming your site because you will use, for example, an AI website builder, no need to worry about this part. However, if you are, here are some questions to ask yourself: What is the new CSS version capable of? Are there any tags that are depreciated? Is Flash finally supported on mobile? (Not really) 2. Plan for Success Wireframe the website: Wireframes lay the foundation for the future design. (Click to Tweet!) During this step, organize your major elements into blocks using simple shapes. There are several ways to wireframe a website. Two tools we use are notebooks and Google. Notebooks are a great way to quickly jot down ideas and layouts without needing a computer. On the other hand, Google has a pretty decent way to wireframe websites with Google Drawings located on Google Drive. (Click to Tweet!) Block out the wireframe: Time to take your wireframe into Photoshop. Using the wireframe in conjunction with all your compiled research, it's time to lay out the wireframe into various flat color blocks. Don't be alarmed if you diverge from the original wireframe; it really only serves as visual training wheels. 3. Execute your Plan. Refine block out elements: Now you're ready to bust out the main visual components. Side note: If you are going to be a web designer, you need a stock photo account. (Click to Tweet!) Large background photos are “in” and we don’t think they’re going away. Also pulling images from Google will get you into trouble fast. At Inturact we use bigstockphoto.com. Using an established color palette, you can rework the block out colors, add imagery, and establish font sizes and selections. Use imagery to break up the flow of content and keep the eyes of the user moving. Add Details: This is where you get the chance to add fine details and re-work some areas of the blocked out elements. An eye for spacing is essential for this step. You don’t have to fill every section with content; often times that just creates an overwhelming visual obstacle for the user. Subtlety is the way to go. Not everything needs a drop shadow, outline, or pattern. Here's a website example for great subtle background images. 4. Very Important Final Step Walk away: When you open up the layout again you may have some new ideas and notice details overlooked previously. Don’t become a Leonardo da Vinci though, it’s okay to finish your piece and move on. Do use web design testing tools to check the responsiveness of the website. Well, how did you do? We'll be more than glad to take a look at your site design and marketing efforts. Complete the form below for a free assessment. We'll share marketing tips and suggestions tailored just for you.", "url" : "https://success.inturact.com/blog/what-makes-a-great-website", "wordCount" : "1072" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Grant Hatfield", "url" : "https://success.inturact.com/blog/author/grant-hatfield" }, "dateModified" : "2024-08-27T12:09:46.075Z", "datePublished" : "2015-07-28T17:47:00.000Z", "headline" : "What Makes a Great Website", "image" : [ "https://success.inturact.com/hubfs/blog-images/What_Makes_A_Great_Website.jpg" ], "mainEntityOfPage" : { "@id" : "https://success.inturact.com/blog/what-makes-a-great-website", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://success.inturact.com/hubfs/inturact-logo.png" }, "name" : "Inturact" } } ```