Home/Website Development/nopCommerce/nopCommerce Website Design Process

nopCommerce Website Design Process

We’ve been building nopCommerce websites since the early versions of the e-commerce platform debuted. That’s a lifetime or two when it comes to website design.

Getting Started

Many of our nopCommerce sites are custom-designed instead of just throwing on a template (but we can do that too). The custom design process starts with understanding your business and website needs. Our team will meet with you to discuss your target audience, competition, and goals for the website.

From that meeting, our team will develop the following resources.

nopCommerce Sitemap Creation

A sitemap takes a close look at your site’s pages and how they will all be connected. This is critical for an e-commerce website from both the User Experience (UX) and SEO standpoint. We will work with you to create a sitemap for your website that is optimized for both.

Your new sitemap will show all of your products, categories, resources, and other important pages. We will identify these elements and sort them into visual hierarchies, representing the traffic between them by adding connecting lines. This will also serve as a blueprint for your website, showing the content required for launching.

Wireframe Creation for E-Commerce

With the sitemap completed, the next step will be to develop a wireframe for your new nopCommerce website design.

A wireframe uses basic boxes and lines to define the spaces on the page. This helps to clarify your vision for the layout. We typically develop layouts for the homepage, product page, category page, and any other key pages for your website.

The wireframes help make your nopCommerce design process iterative. We don’t just combine functionality, layout, creative, and branding all in one step. With a wireframe, these elements are worked on one at a time. This means you and your team can provide your feedback much earlier in the process to prevent wasted time and money.

Graphic Design Mockups for nopCommerce

Sitemaps and wireframes are just to get you started. Our graphics team will use them to layout your website. This is a complete mockup for your team to review during the graphic design phase that clearly defines the look and feel. Your company’s image and brand position are clearly represented with your logo, marketing materials, and all of the input you have given throughout the process.

During this phase, your team will have the opportunity to make revisions to the website design until you feel satisfied. The deliverables for this phase are flat mockups of the site via online links.

Not all designs are created equal, and not all companies need the highest level available of graphic design. The video below will help you to understand how custom graphic design works with nopCommerce websites. Contact our team to chat about any of the options available. Regardless of which design route is best for you, the website is a critical component of your business and should be treated as such.

nopCommerce Skinning and Custom Development

During the build phase, our nopCommerce developers will take the approved graphic design, sitemap, and wireframes to begin writing the code needed for you to have a fully-functional website.

Web design best practices, such as cross-browser compatibility, optimized code for performance, clear navigation, conversion-focused product pages, and fast load times will be a constant focus during the build process. During the development phase, you will have a link to view your nopCommerce website and provide feedback as the build progresses.