Example site

Introduction to website development

Education, Web, , , ,

This tutorial introduces various ways to deliver or build a website, interactive document or presentation. More tutorials are available on this topic. Above, under the title of this page, for instance click the tag “website” to see more.

Tools/platforms

Below you can find a list of tools and platforms in random order which can be used to deliver/build a website or interactive document or presentation (marked “idoc” below).

* Figma Design is a design tool, not suitable for website development, but their product FigmaSites is! Get the education edition for free.

Preparation

Before you start, take some time to prepare.

Define purpose and goals
Decide why the website exists. Is it to inform, sell, showcase a project, or collect sign-ups? Clear goals guide every design decision.

Identify target audience
Think about who will use the site: their needs, technical skill level, devices (mobile vs desktop), and expectations.

Plan content and structure

  • List the main pages (e.g., Home, About, Services, Contact)
  • Organize them into a simple site map
  • Decide what content goes on each page
  • Decide on type(s)of navigation, eg. scrolling, page links, menu, search
Example wireframes

Create wireframes (low-fidelity sketches)
Sketch basic page layouts on paper or digitally (with Figma):

  • Where navigation goes
  • Placement of text, images, buttons
    Focus on structure, not colors or fonts yet.

Pick a template, or design the visual style yourself
Take some time to browse through templates and do not forget to checkout the previews (also the mobile version!). More: “WIX Website Templates – How to Choose the Right One for Your Site”.

Wix

Example wix site

Wix is an online website builder that lets you create a complete website without coding, using ready-made templates and drag-and-drop editing. It allows you to focus on content, structure, and user experience rather than technical setup. For designers, Wix is a fast way to prototype and publish ideas while learning how real websites are structured.

Start a website with Wix

First thing, when you register with Wix, be aware that – for a free site- your lastname will be used as the base URL:

https://lastname.wixsite.com/projectx

And your site name as the last part (here “projectx”).

Is Wix still free?
Yes, but you might want to check out the details, as the free version has some limitations.

Wix tips

Content optimization

Write texts that visitors can scan quickly, not long blocks of text meant to be read line by line. Keep texts short, use clear headings and short introductions, and highlight key points early. You are not writing a report—if detailed information is necessary, place it in pop-outs, expandable sections (accordions), or on separate appendix pages with downloadable PDFs.

Example of an expandable section with more info

Structure texts so visitors can quickly understand the message without having to read everything. Use short paragraphs, clear headings, and strong introductions to guide the eye and communicate the main points first. Move detailed or background information to expandable sections or separate appendix pages so the main pages stay clear and focused

Slow websites frustrate users: keep the site lightweight.
Optimize images: (use JPEG for photos, PNG/SVG for graphics, WebPfor modern compression). Minimize animations and avoid excessive plugins. Reduce resolution of images before uploading them. Luckily, Wix will handle most of this for you.

Improve User Experience: Add Call to Action (CTA).
The website should guide visitors on what to do next (e.g., “View Prototype,” “Download Report,” “Contact for Feedback”). CTAs should be obvious and well-placed but not overwhelming. Learn more.

Example: A project website could have a “See the Prototype” button leading to an interactive design, rather than burying it in a long text description.

More User Experience tips.

Password protect your site

Recommended while developing, but can also be used after it is finished: for instance if it contains sensitive information that must be protected.

Read more on how to set a password for the entire site.

You can also add password protection to specific pages separately.

Design with accessibility in mind

Search engines and accessibility tools can’t see images, but they can read ALT text. Add image descriptions to improve your site’s SEO and accessibility.

Do not forget to test your site in mobile view:

Add search: allow visitors to quickly find what they are looking for

Add a search option to your site (available as Wix app), or use a template that already has it. Make sure the search results page includes the desired search results:

More information