Website design: The Early Days

It's hard to imagine today, but the early days of websites were very limited in the technology available to create them. Internet speeds were vastly lower than today's average, this meant image and video heavy sites could not exist (without having to wait extremely long times for them to load). On the design and development side of things, the tools available were very basic. This limited the use of websites to mostly just displaying text and in a simple format.

One of these tools was HTML (Hypertext Markup Language). This allowed web designers to type out the layout and content of a website, without much in the way of styling. However, one of the main features of HTML was the ability to 'link' to other websites. This was important as it allowed groups of websites to connect to each other and form the 'web' of pages we know as the Internet.

Despite of the limitations at the time, technology would continue to advance and adapt at an increasing rate. As more and more people began to connect to the Internet, more and more websites would need to made, further pushing the need for more design and development into more complex and visual websites.

screenshot of a website built in year 2000

A screenshot of the Trade Me NZ home page from year 2000.

Getting better...

With advancements in technology, websites took a vibrant turn. A few years later a tool called CSS (Cascading Style Sheets) was released. This allowed for more unique websites to be made, adding colors, changing fonts, and arranging content in different layouts was now possible. Suddenly, websites weren't just text heavy pages—they were starting to look good too!

Around this time, dial-up Internet was becoming more common. Though incredibly slow compared to today's internet (which is over 3000x faster), images and animated GIFs started to become more common. Another important technology around this time was Javascript. This allowed website designers and developers to make web pages more dynamic and interactive. Javascript can be used to make websites much more functional and complex.

As the online world grew, the opportunities for web designers and developers did too. Ecommerce quickly became a huge driving force in how websites were created. People online began to have expectations for how websites should look and behave. An example of this is the concept of a 'Checkout' system which is now a mandatory function for anyone selling items online.

modern ecommerce website product page

The rise of modern Ecommerce designs began as internet technology improved.

Website Design: Today

Today's websites have come a long way, thanks to some pretty cool tools and systems. Website builders have now become a new contender in the world of website design. For many small businesses, gone are the days of hiring a web designer and developer to build, complete and then host a website. Website tools like Dazzly have made it so creating and managing a website is now accessible to almost anyone. These tools take the heavy lifting out of web building, making sure websites run reliably, look great and function smoothly.

Another huge change was the introduction of mobile devices. Almost overnight, the requirement to make websites look good, let alone work on mobile devices was paramount. Touch screen based devices were fast becoming the most popular way of browsing the web. Web designers use the term 'Responsive Design' when referring to the process of making the website work across a range of different screen sizes and devices. These days a modern website will need to be designed and developed with this in mind.

Adding to this experience is the use of multimedia elements like videos and animations. These can often add a lot of value, making browsing more engaging and enjoyable. The technology available today which let's you stream large numbers of high quality videos from anywhere, has completely changed the nature of some businesses (see Netflix).

mobile devices showing the dazzly website builder

Tools like the Dazzly Mobile Website Builder have transformed the website design and development industry.

Quick and Easy template screenshots

Service Warrior 2

Built for service-based businesses, Service Warrior 2 is a visually stunning multi-page website adapted to suit your requirements, from sole traders to large companies this website will come out looking sharp.

dazzly logo background pattern

What's Popular Now

minimalist design icon

Minimalist Design

Minimalism in web design is all about keeping things simple and clutter-free. The idea is to strip away all the unnecessary parts on a web page and focus on what's truly important. This means using lots of white space, choosing fonts and colors that are easy on the eyes, and ensuring that everything on the page serves a purpose.

color pallete icon

Soft Colors

Using soft colors in web design can create a calming and relaxing tone. Gentle hues such as pastels and muted tones, make websites feel welcoming and easy on the eyes. It can also be used to guide attention to important areas/information without being too loud or overwhelming.

user experience icon

User Experience

User Experience (UX), is all about making sure that when you visit a website, everything feels just right. Good UX means that a website is not only simple to navigate but also enjoyable to interact with. Bad UX however, can quickly lead to frustration and website abandonment.

mobile device icon

Mobile Websites

Mobile devices make up almost 60% of all Internet usage in the world. Now more than ever, websites need to cater to users on their mobile phone. When creating websites, web designers must take into account how photos, layouts, text will need to adapt to different screen sizes and displays.

animations icon

Micro Animations

Micro animations in web design are like little helpers that guide you while you're viewing a web page. Things like hover effects over buttons and loading animations, let the user know how to interact with the website and what to expect from certain actions. This can make a website feel more intuitive and enjoyable, without being over-the-top or flashy.

website speed icon

Speed & Performance

When it comes to websites, speed and performance are often overlooked. A well-designed website needs to be quick and efficient, so you can access what you need without wasting time. This means that the website needs to load fast wherever you are and that everything runs smoothly.

Case Study: Two Boys Fencing, Canterbury

Use of clear, easy to read fonts. Soft blues to convey professionalism and reliability. High quality photos used to show work and location. Simple to navigate and use.

“Very helpful website builder. Clear and user friendly with great templates to help make the website design suit you.”

View Website open external link

two boys fencing website design on the service warrior 2 template
salon savoy website design on ecommerce template

Case Study: Salon Savoy, Wellington

Easy to navigate Products and shopping cart. Use of photos to showcase and salon and customer results. Simple Booking function and buttons.

“I have nothing but good things to say about my experience with Dazzly. I transferred my website - the process was very easy (even for a technologically challenged millennial like myself!). I'm so happy I made the switch!”

View Website open external link

Get started with Dazzly in minutes.

yellow background pattern with dazzly logo

Useful Web Design Tools

Dazzly’s Website Builder

Each of the website Templates used in Dazzly has gone through stringent testing and refinements to come up with a good balance of visual quality, usability, accessibility and speed. For those who want a quality website without the need for everything element being completely customizable, then Dazzly is the choice for you. Best of all it's completely free to try!

Dazzly Website Builder

Google Fonts

Google Fonts is a free library of text styles for your website. It offers a huge collection of fonts that you can easily add to your Dazzly website to make your text look just the way you want. Whether you're going for something bold and eye-catching or sleek and minimal.

Visit Google Fonts

Stock Photo Libraries

If you're struggling get your own photos to look right you might want to try adding in some stock photos. Dazzly integrates with the popular free Stock Photos sites such as: Unsplash and Pexels. You can also find some quality paid stock photos from other sites like: Shutter Stock, Adobe Stock and Getty Images.

Color Palette Generators

For inspiration on color choices, online color palette generators can be a good start. Website colors play an important part in conveying your message to your visitors. Color theory goes into the scientific and psychological responses to color and color matching. Some useful tools for generating color palettes: Coolers, Adobe Color and Color Hunt.

Pattern/background Generators

Sometimes a photo just might not be suitable in certain parts of a website template. Luckily, there's a number of online tools that will generate free shape or color based background images that can be used in place of photos. These can usually be tailored to your brand by adjusting the colors and graphics in the tool itself. Here are some useful tools: Coolors Gradient Maker, SVG Backgrounds and Haikei

multi colored shapes abstract background
Quick and Easy template screenshots

Quick & Easy

Looking for a quick, yet professional landing page for your business? Quick and Easy is the choice for you. Feature your services, display your contact information and receive contact form inquiries with this modern, mobile friendly single page website.

dazzly logo background pattern

What makes a good website design

Easy-to-Read Fonts

Choosing the right font is important as it can make a big difference in how easily visitors can read your content. Simple, sans-serif fonts like Arial or Helvetica are easier on the eyes when reading on screens. Keeping your font sizes large enough also ensures your website text is easy to read across devices, without having to squint or zoom in.

Picking Colors that Look Good Together

Color harmony in web design is about making sure the colors you choose work well together to create a pleasing and balanced look. When picking colors, it's useful to start with a primary color, which will set the tone of your design. From there, you can choose a secondary color that complements the primary, adding depth without clashing. Another important aspect is ensuring there's good contrast, so your text is always readable and doesn't blend into the background color.

Using Clear, High-Quality Pictures and Icons

Using high-resolution images on your website is key to keeping things looking sharp and professional. High-quality images ensure that everything from your product photos to your team portraits make a great and lasting impression. However, high quality photos come at cost - website loading times. Luckily, Dazzly effortlessly takes care of this for you, ensuring a smooth and speedy user experience. Icons can also play a vital role in helping users find their way around your site. These small symbols can convey complex ideas at a glance and guide visitors with ease, making navigation intuitive and engaging.

Use of whitespace

Whitespace is simply the empty space between elements like text, images, and buttons. It's an essential part of a clean design because it prevents elements on your website from feeling jammed together. By using whitespace wisely, you can make your website look more organized and easier to use. For example, adding some space around blocks of text can make it much easier to find and read. This way it helps draw attention to key parts of your site, like important messages or call-to-action buttons, by giving them room to stand out.

Have any questions? Or need help selecting a Website Template? The friendly team at Dazzly are happy to help.

red background pattern with dazzly logo