Web Design: From Idea to Finished Website

Important elements of modern web design

Some things matter more than anything else in good web design. To learn more about how we at Mementor work with these elements, see our page about web design.

Here are the most important ones:

Adaptation to all devices

We call this responsive web design, and it is important. Your website should look good and work well whether people use a mobile phone, tablet or computer. If you want to know how we as a digital marketing agency can help you with responsive design, contact us.

• Use flexible images that resize without becoming blurry
• Create menus that work just as well on mobile as on PC
• Test your website on many different screens

Easy to use

Visitors should find what they are looking for without any problems. Keep it simple and tidy. For more tips, visit our SEO for beginners guide to ensure that user-friendliness and visibility are handled optimally.

• Create a menu that is easy to understand and use
• Make sure important information is easy to find
• Use buttons and links that are large enough to click on, even on mobile devices.

Fast to load

People are impatient online. A slow website can cause visitors to leave quickly. Here's how to make your site faster:

• Compress images so they take up less space
• Use fast hosting for your website
• Remove things you don't need, such as old plugins or unused code.
• Check Core Web Vitals in PageSpeed Insights. INP measures how fast the page reacts when people click

Accessible to All

Create websites everyone can use, including people with impaired vision, hearing or motor skills. It is both right and required by law: Norwegian websites aimed at the general public must meet requirements from the WCAG standard, and the EU Accessibility Act tightens the requirements for businesses selling in the EU.

• Use colors with good contrast, so the text is easy to read for everyone
• Add alt text to images for people who use screen readers
• Make sure the whole website can be used with a keyboard, not just a mouse

We explain the whole framework in our guide about text to speech and universal design.

Smart layout

Use sizes, colors, and placement wisely to guide people's eyes where you want them to go. We call this visual hierarchy. Some tricks:

• Make the most important things biggest or most colorful
• Use white space to create focus
• Group things that belong together

Trends in Web Design

Now that we have covered the basics, here are some current trends:

Small, fun animations

These bring your page to life and make it more interesting. But do not overdo it. Some ideas:

• Let buttons change slightly when you hover over them
• Use small animations to show that something is loading
• Let elements on the page move slightly when scrolling

Dark mode

Let people choose between light and dark backgrounds. It is both stylish and easy on the eyes. Keep this in mind:

• Create two color palettes, one for light and one for dark mode.
• Make sure text is easy to read in both modes
• Give users an easy way to switch between light and dark

Unusual layouts

Try something different to capture attention. But remember that it still needs to be user-friendly:

• Experiment with slanted lines or unusual shapes
• Try placing things in unexpected places on the page
• Play around with how you present information

Tell a story

Let your design say something about your company. It creates a good connection with visitors:

• Use images and text that show the company's journey
• Create a timeline showing important events
• Use colors and designs that reflect your company's values

Environmentally friendly design

Websites can also be good for the environment. Try to create pages that use less energy:

• Choose a fast and energy-efficient web host. We run websites on Norwegian servers through our Service Level Agreements (SLA)
• Reduce the amount of data that needs to be loaded
• Consider whether you really need all the large images and videos

Tools and technology for good web design

Here are the tools we use and recommend ourselves:

Popular design tools

Figma is today the standard tool for web design. Here is why:

• They let you create interactive prototypes
• You can easily collaborate with other designers
• They have many useful plugins that make the job easier.

Code libraries

React, Vue.js, and Angular make it easier to create websites that work well. Here are the benefits:

• They make it easier to create complex, interactive websites
• You can reuse code, which saves time
• They have large communities of developers who can help if you get stuck.

Systems for managing content

At Mementor we build most websites in WordPress, and online stores with WooCommerce. For clients with special needs we also build solutions from scratch with our own CMS, as we did for Stas Artist with an online store, Vipps and Klarna. See more examples in our client cases.

WordPress

• Very popular and easy to use
• Lots of themes and plugins available
• Suitable for everything from simple blogs to large online stores

Webflow

• Visual page builder where you see the results right away
• Lots of great design options without having to code
• Great for designers who don't know much about coding

Shopify

• Made especially for online stores
• Built-in payment solutions
• Easy to manage for store owners

AI in Web Design

AI tools can now draft entire websites in minutes. That is useful for sketches and idea work, but the result often looks like everyone else's. Here is how to use AI smartly:

• Use AI for drafts, color suggestions and text ideas
• Let a designer shape the expression, so the site looks like you and not a template
• Quality-check everything: AI-generated content and design must pass human review before publishing

How Your Website Gets Visible in Google and AI Answers

More and more people find businesses through ChatGPT and Google's AI answers instead of regular search results. Understanding how SEO and web design work together is no longer optional. A well-structured web design is half the job:

• Clear headings and short paragraphs make the content easy to cite
• FAQ sections with schema answer directly what people ask about
• Semantic HTML helps both screen readers and AI models understand the page

This is called AEO. Read more in our guide about AEO optimization. For search visibility, see also our SEO services.

From Idea to Finished Website: The Process

Wondering how to actually create a website from scratch? Here's a simple overview:

1. Planning and strategy

First, think carefully about what you want to achieve with your website:

• Who are you? What do you sell or provide?
• Who is your target audience?
• What should visitors be able to do on your site?
• Which pages do you need? (E.g. About us, Contact, Products)

2. Design and prototype

Now the creative work begins:

• Make sketches of how the page should look
• Choose colors, fonts, and visual elements
• Create a prototype that shows how users navigate

3. Development

Here, the design is turned into a functioning website:

• Code HTML, CSS, and JavaScript, or use a CMS
• Build functionality such as contact forms, search, etc.
• Set up the database if you need it

4. Testing

Before launch, it is important to check that everything works:

• Test on different browsers and devices
• Check that all links work and that forms send data correctly.
• Test the speed and optimize

5. Launch and maintenance

Now it's time to show the world your website:

• Publish the website on a web host
• Set up your domain name
• Keep the page updated with new content and technical updates.

Conclusion: Your Web Design Makes the Difference

No matter what is popular right now, the most important thing is that your website:

• Is easy to use for visitors
• Loads quickly on all devices
• Looks professional and reflects your brand
• Helps you reach your business goals

Starting on a new website? We design and build websites that deliver results, either at a fixed project price or as web design as an ongoing service. See our web design service or ask for a free assessment.

Frequently Asked Questions