Welcome to the Design Platform

Please take a moment to read through the content below of Colour Designs, Typography, Content & Imaginary. There are colour schemes that will inspire you and we are almost certain there will be a pattern for you that you will be fond of. These colour pallets are very important and how they bring and form together a stunningly looking Website

DESIGN PLATFORM

Paper and digital crafts are an emerging trend that provide realistic three-dimensional feel to online images. Go against the grain of flat design by integrating these whimsical images.

Neon lights coupled with vibrant hues, coined New Minimalism, continue on the rise as a major trend. Amp up your designs with pops of concentrated colour to entice your viewers.

Celestial craters and other galactic beauties are continuing to rise as a dominating trend. Grab inspiration from these dazzling space oddities for a truly out of this world design.

The delicate and alluring characteristics of the Natural Luxury trend transform any space, from home interiors to consumer goods. Add a touch of extravagance to your design.

Colour is one of the most critical aspects of a design.


Below is a compiled brand-new colour combination to inspire your next project.


Colour sets the tone of any visual, engaging viewers while shaping their perceptions. Whether monochromatic, bright, cool, warm, or complementary, all shades play a role in design. 


Finding the right colours for your design can be daunting.

This is why we have presented a colour combination for you to use. Each colour palette is inspired by DG images and comes with a set of hex codes so you can use them in your website design, social media ads, direct mailers – maybe even your kitchen remodel! 

  • Floral & Fun
  • Electric Purples
  • Celestial Green
  • Icy Stone

We take pride in our work.


When we build your Website, it has to not only meet your requirements, but our own high-quality standards. We Create numerous types of Web Design in Johannesburg and have packages to meet everyone’s needs. Anywhere from a basic Template, to a complete state-of-the-art Website with an online payment facility (e-Commerce), Content Management System, Customized Web Applications. Get in contact with us today so we can start to design your Website for you.

COLOUR PATTERN THEMES THAT BLENDS WELL TOGETHER

 

Click on any image to see a larger display and scroll through the inspiration individually

Typographic Design
Introduction

 

Typography is more than just what fonts you use. Typography is everything that has to do with how text looks – such as font size, line length, color, and even more subtle things like the white space around a text. Good typography sets the tone of your written message and helps to reinforce its meaning and context.


Visual Hierarchy

 

Visual hierarchy is the concept of organizing elements on a page in a way that establishes an order of importance, allowing readers to easily navigate the page and find relevant content. When done correctly, it should guide the reader’s eye throughout different sections of the page. Visual hierarchy is very prevalent in typography, and forms the basis of typographic design theory.

 

The following typographic design of Alice’s Adventures In Wonderland is a clear established visual hierarchy
Alice in Wonderland.1

Visual hierarchy can be broken down into 5 different parts:

1. Size & Weight

Size and weight are the two easiest ways to create visual hierarchy. They easily indicate what is important, and readers’ eyes naturally jump to them. By simply styling those two, a sense of importance is already created. Choosing fonts is a creative and emotional process. Different fonts convey different feelings, and you want a font that complements the tone of your text. • Start by finding a good font for your body text. When combining multiple fonts, keep your body font constant, and try to find other fonts that go well with it. When you receive our NUC Plan there are Ideas for you and what Fonts works well together. • Use tools such as TypeTester and TypeCast to help you experiment • Get inspired by others! Fonts In Use features a large collection of great font choices. • Some fonts were designed to be used as large-size headings, while others were designed to be used in small-density screens. Use fonts in their intended roles. WebType is a great resource for finding the “intended size” of different fonts. In addition, TypeKit labels its font as either Heading or Paragraph.

2. Positioning

Positioning is another way to create a visual hierarchy. Here, the Title and Author of Alice Adventures in Wonderland are above the rest of the text and centered, showing its importance. Character spacing should not be minimized: Altering the character spacing to fit in more text, makes it denser and more difficult to scan. sufficient line-height is especially important in Web Design because it makes the text ultimately more scan-able. Letter Spacing Like line-height, affects the readability in Web Typography. Letter spacing is, as the name suggests, the space between each letter in words.

3. Typeface

Contrasting Typefaces can create a distinction between different elements and achieve Visual Hierarchy. Typography is the use of type in a design. Typography seeks to create a greater meaning by thoughtful and deliberate selection font, size, color, layout, alignment, and other factors that affect the design of type on a page. There are two major classifications of fonts to choose from: serif and sans serif fonts. Sans serif fonts have been proven to be more easily read online in body copy because serifs make it tougher for the eye to follow, while the opposite is true for printed text. The consensus for the most popular fonts are: Arial (Mac OS equivalent is Helvetica) Times New Roman (Mac OS equivalent is Times) Verdana Georgia Courier

4. Color

Setting important text in a different color is a very easy way to create Visual Hierarchy. However, only do so sparingly as using color everywhere causes it to lose its distinction. Color provides a huge visual distinction and is an important part of Typography. • Don’t pick colors arbitrarily; use a color palette instead. Material Design colors and Flat UI colors are good palettes to start with. • Do not overuse a color too many times, or else they may lose their unique distinction. Do not use too many completely different colors either. • Adhere to the Law of Similarity which we describe in full in our NUC Plan when we Design your Website. • It is recommended to not use pitch black #000 as your body text color. Instead, use a very dark gray such as #333. • Sometimes, it is better to use an alpha value or opacity instead of a lighter color. • Make sure that there is enough contrast between the text and the background. Use this contrast checker tool to help you.

5.Gestalt Laws in Typography

Gestalt principles, or Gestalt laws, are rules of the organization of perceptual scenes. When we look at the world, we usually perceive complex scenes composed of many groups of objects on some background, with the objects themselves consisting of parts, which may be composed of smaller parts. The two most important Gestalt Laws to understand in Typography are the Law of Proximity and the Law of Similarity which we also elaborate on in our NUC Plan which forms part of the 12 Principles.

Law of Proximity: To master the positioning of elements, it is crucial to understand the Gestalt Law of Proximity. The Law of Proximity states that humans perceive objects that are closer together as related objects. And vice versa, objects that are farther apart are perceived as different groups. In Typographic design, “proximity” refers to the amount of white space created by line-height, margin, and padding. There should be a distinctive and noticeable amount of additional white space between two different sections.

Law of Similarity: The Gestalt Law of Similarity states that entities that look similar tend to be grouped together. For example, if all clickable texts are sky-blue, the audience will assume that all textual content that is sky-blue is clickable. In typography, the law of similarity just means to keep your styles consistent on elements that serve the same function. Group of elements should also look similar to other groups that serve the same function, for example, the visual styles of one blog post should look similar to another blog post. On the other hand, elements with different functions should not look similar to one another.

Conclusion

Congratulations on making it to the end of the Visual Hierarchy chapter. Typography on the web — a medium where the user can be on any device in any resolution — is extremely difficult. We find it very hard to have up-to-date information on the best Web on Typographic Practices. There are many blog posts by experts with contradicting information and existing books on the subject of Web Typography which rarely goes into details on technical implementation. We aim to solve this problem by taking the most important, factual of information that a beginner would need to know to create industry-standard Typographic Elements. We hope that this goal succeeded with you.

The Golden Rules of excellent Content to write for Your Website

1. Know your audience:

It sounds simple, but so many writers put pen to paper—or finger to keyboard—before thinking about who it is, they’re trying to reach. Before drafting content, ask yourself these questions: Who is my primary audience? What about a secondary audience who can influence and inform my primary audience? How will they find my site online? For example, say you’re creating a website for a law firm. Your primary audience might be existing clients. However, your secondary audience is much broader and could include other attorneys, law reporters, or anyone who might need your services in the future. You’ll need to make sure your content is both accessible and interesting to all of these audiences. What kind of questions might these groups ask about a particular topic? Where are they most active online? What kind of information do they need? Audiences find web content through many different paths—social media sharing, links from other websites, email sharing, and search engine results. That last method is especially important when you write for the web. Text could be extremely well-written and informative, but if it’s not optimized for search engines, chances are few people will find it. Think of your audience again: what search terms would they type into Google? Make sure to include those terms in headlines and sub-headers.

2. Follow the “inverted pyramid” model:

Web readers have short attention spans—they’ll decide whether your site has the information they need in seconds. Structure your content like an upside-down pyramid or cone. The most important messages go at the top of the page. Then, gradually drill down to the more specific, supporting information. End with tangential details. For example, say you’re creating a web page about a conference. The most pertinent details—a description of the theme, date, and location—would appear at the top of the page. Supporting details like speakers and their lecture topics would follow. The less important information—such as conference organizers, the history of the conference series or a list of related resources—would appear at the bottom of the page. These two graphs helped guide our own website makeover and can help you conceptualize the structure of your site.

3. Write short, simple sentences:

Long sentences are for Charles Dickens—the short attention span of today’s reader demands sentences of 35 words or fewer. Statistics shown that the average Adult reads at a 7th to 9th-grade level. So, website content that’s accessible and easy to read will naturally reach a wider audience. Focus on using nouns and verbs; use adverbs and adjectives sparingly. Don’t use words like “equanimity” or “obfuscate” when words like “calm” or “confuse” will do If you’re not sure what grade level you write at (like most of us!) then it’s useful to check how your texts score on readily models. Most of the popular models are based on the length of words and sentences in a text. Your text’s readability is then scored by a number or an education level. These three tools will scan your text and score its readability:

4. Stick to active voice:

Use active rather than passive verbs, and specify the subject of the sentence. For example, rather than writing “A coffee was ordered,” write “The man ordered a coffee.” Instead of saying “Products can be ordered on our website,” say “You can order products on our website.” Active voice helps create succinct, reader-friendly sentences. It’s also more direct; when you speak directly to the audience (“You can do it”) it’s more engaging than saying “It can be done.”

5. Show, don’t tell:

Don’t limit your prose to generalities and high-level statements. Specific, real-world examples help readers better understand and visualize your messages. Consider these two descriptions: This is the best dog toy money can buy.- Or – We made the “Rough Rover” dog toy from durable, 100 percent natural rubber, designed to resist punctures and tears from even the most dedicated of chewers. Which version gives you a clearer picture of the type of toy you’re buying? Specific details in the second description show readers the dog bone rather than tell them about it.

6. Mix the Jargon

The Web is for everyone, not just technical experts. So, make sure information is understandable for the educated non-specialist. Spell out acronyms on first reference. Avoid insider language. Explain complex or niche terms. And provide hyperlinks to other articles where readers can get more background information on a particular topic. Consider this sentence: The journalist grabbed a SOT from the MOS, drove back to the station and put the story in the can. Many of these terms are comprehensible only to broadcast journalists. A reader-friendly revision would be: The journalist interviewed a bystander about the incident and recorded her statement to include in the story. This tip is especially important if you work in a technical industry, but want your Website to attract non-expert customers. Remember that you need to write for your audience (see point #1) and not for your colleagues. Using accessible language will help you come across as approachable and open just what you want to convey to future customers.

7. Mix up your word choice:

Words are like cookies—we all have our favorites. But when it comes to keeping your visitors interested, variety is key! Word clouds are fun to use and can help you vary your word choice by visualizing which words you use the most. The more you use a word, the bigger it will look in your cloud. Have you overused a certain word? Type it into Thesaurus.com to find new synonyms to enhance your text. Negative words standing out in your cloud? Now you know exactly what to tweak for a more positive tone. Keep an eye out for your Website keywords as well: these should appear several times in your text, so it should be easy to recognize them in a word cloud. Here’s the exception: keep key terms consistent across your site to avoid confusing your visitors. For example, if you’re a photographer, don’t offer “photo shoots” on one page then call them “photography sessions” on the next. Make a list of terms that describe your company and group together any words you use to mean the same thing. Pick your top choice and stick to it everywhere on your Website. Like this: Use: invoice. Not: bill Use: photoshoot Not: photography session, photo appointment, shoot Do you call your customers clients, patients, or users? Do you refer to services, packages, or plans? Once you have this list, you can use it to review any text before you publish it.

8. Make text scan able:

In addition to putting the most important information up top, make sure the text is easy to skim. Most web readers will scan the page to find the specific piece of information they’re looking for—if they don’t find it easily, they’ll move on. Don’t believe it? Try paying attention the next time you open a web page you haven’t seen before. Are you reading every word beginning to end? Or is your eye jumping around, looking for the information you want? • Instead of text-heavy paragraphs, use bulleted or numerical lists. Instead of one long page of text, organize content into labeled tabs. • Always include “white space.” This is the empty space that surrounds paragraphs, images, and other elements on your web page. Though it may seem like this is just wasted space, it’s actually a Web designer’s best friend. Comfortable amounts of white space around text make it more legible, and more enjoyable to read. • It’s also important to divide content into sections with descriptive sub-headers. For example, a Web page about climate change might organize information under the following headings: o What Is Climate Change? o Drivers of Climate Change o Current and Projected Impacts of Climate Change o Solutions to Reduce Emissions o Learn More These sub-headers not only help readers navigate the page, they’ll help search engines find your content. Use one large (H1) heading at the top of each page, use medium (H2) headings to separate your main content, and use small (H3) headings for any minor points.

9. Incorporate multimedia:

Sometimes a picture—or infographic or video—really is worth a thousand words. Research shows that 90 percent of the information transmitted to the human brain is visual, and people process visual information 60,000 times faster than text. An easy-to-read chart or graph can also do a better job of explaining a complex topic than text alone. If you’re not a Graphic Designer by trade, there are lots of ways to use visuals on your website and some great services out there to help you make graphics yourself, like Canva and Piktochart. Images also help break up the text, making your page easier to read. We recommend having at least one image on each page of your website.

10. Layer website content:

The great thing about a Website is that it’s easy to direct readers from one page to another. Help readers find more great content by hyperlinking certain words or phrases to other relevant resources, especially those on your own Website. This will help keep people engaged with your content and moving through your site. For example, say this sentence appeared on your cooking Website: Ratatouille is a low-fat dish that consists of seasonal ingredients like eggplant, squash, and tomatoes. You could hyperlink “low-fat dish” to a page with other blog posts on healthy eating. Building these internal links within your own site also helps your SEO, but keep in mind that links should always be relevant and helpful. Visually, if you overload your text with links, people won’t know what to click on. Google recommends keeping the number of hyperlinks on a page to a “reasonable number.”

11. Leave the user wanting more:

It is good to have a call-to-action button and where you present it on your website. Good Websites end each page with a strong call-to-action (or CTA for short). Is there a person or a reader that the client should contact for more information? An interesting video they should watch? How about a related blog post they can read or a report they can download? This strategy helps direct readers to other areas of your Website and encourages them to promote your content to their friends and family. Keep these calls-to-action succinct, and start them with action verbs like “Download,” “Share,” “Join,” “Sign Up,” “Learn More” or “Watch.” And of course, make sure to include a hyperlink that actually allows readers to fulfill the action you’re asking them to take. Writing, in general, is hard work—writing content for your Website, even more so. But remember, you don’t need to write perfect texts first time around! Once your content is live, you can do monthly Website checks to monitor and optimize its performance. With these tips, you’re prepared to create effective content that resonates with even the flightiest and time-pressed of internet readers.

Our products and services are tailored to give our clients the best there is to offer.

Web Hosting & Design Plans made affordable

Get in touch with us now and send us a mail to help you set up an awesome hosting plan with intuitive web design, have your dream business name registered and see it all come to life….. If you just have a query about hosting in general speak to us, we will gladly help or assist. You are welcome.

Free Image Gallery Websites for some Inspiring Images

Unsplash has its own license, which essentially lets you use the images for free, in any way you like, except for using them to create a competing website. https://unsplash.com/

Burst is a free stock photo platform for entrepreneurs by Shopify. The images are both free and royalty-free. (Burst has a cool section of business ideas, with tips and high-resolution images for getting your business started.) https://burst.shopify.com/

Pexels also has its own license, which states what you can and cannot do with the images. You can use and modify the images for free for both commercial and personal use without attribution. https://www.pexels.com/

Images on Pixabay are licensed under Creative Commons Zero (CC0), which means you can use the images without asking for permission or giving credit to the artist (though it’s always appreciated). Pixabay provides a gentle reminder to check that the content depicted in the images doesn’t infringe on any rights. https://pixabay.com/

Free Images provides over 300,000 free stock images under its own license. The license allows a very broad range of uses, though it does list several restricted use cases (which are quite common for most free images sites). https://www.freeimages.com/

Kaboompics uses its own license, which is similar to Creative Commons Zero except that you cannot redistribute its photos. There are two things that I love about Kaboompics: one, it allows me to search by color, and two, it provides a complementary palette of colors in the photo. https://kaboompics.com/

Stocksnap uses the Creative Commons CC0 license so its photos are free to download, edit, and use for both commercial and non-commercial projects. https://stocksnap.io/

Canva is an online graphic design tool that also offers free stock photos. One advantage of using Canva is that you can quickly turn an image into a custom graphic to use on social media or your blog. https://www.canva.com/photos/free/

Life of Pix lists free high-resolution photographs and partners with Adobe Stock for more (paid) stock photographs. https://www.lifeofpix.com/

Gratisography also has its own free photo license, which lets you do “almost anything you can think of”. While they have a rather limited number of images now, many are high-quality images that I would use. https://gratisography.com/

This is an album of photos of women of color in tech, started by Christina and Stephanie, the founders of #WOCinTech Chat. The images can be used as long as you attribute #WOCinTech Chat or wocintechchat.com. (While the team isn’t updating the album anymore, there are over 500 images to choose from!) https://www.flickr.com/photos/wocintechchat/

Flickr is an image hosting platform where you can find images that can be used and modified for commercial purposes. Select “Commercial use & mods allowed” under the “Any license” filter to find those images, and remember to check the license for each image as they vary. https://www.flickr.com/

The Jopwell Collection contains several albums with hundreds of images featuring people in the Jopwell community. The images are free to be downloaded and used as long as you visibly attribute Jopwell. (You can read the story behind this collection here.) https://jopwellcollection.jopwell.com/

CreateHER Stock’s team has manually curated more than 200 high-quality images of women of color, which might be used for personal use only. (Do check out their license here.) You can also receive new free images every month when you sign up for their newsletter. https://createherstock.com/free-stock-photos/

This might come as a surprise to you (as it was to me). You can use images from Getty Images on your non-commercial websites for free by embedding them. Downloading an image and uploading it to your website is still a no-no—you’ve got to embed it. An embed is slightly more intrusive than simply adding a photo into your post – the embed keeps its own frame, share buttons, and branding. Still, for many blogs, it’s an option worth looking into. https://www.gettyimages.com/resources/embed

PicJumbo offers a variety of free images for any kind of use—free of charge with no registration required. You can also get new free images by subscribing to their newsletter. (If you have the budget to spare, do check out their premium photo collections such as this, which looks amazing to me! It even has vertical images for Stories content.) https://picjumbo.com/

Similar to Canva, Crello is a free graphic design tool by Depositphotos, which has many free images for you to use. https://crello.com/

Depositphotos offers a sample of free images, vectors, editorial content, and footage, which is updated every week. You can also sign up for an account to get the free stock files every week. https://depositphotos.com/free-files.html

iStock releases a new batch of free stock files every week when you sign up for a free membership. https://www.istockphoto.com/

New Old Stock is a collection of vintage photos from the public archives, free of known copyright restrictions. https://nos.twnsnd.co/

Superfamous houses the work of Dutch interaction designer Folkert Gorter, whose photography is available under the conditions of a Creative Commons Attribution 3.0 license. This means that you can use the work for your own purposes — including commercial use — as long as credit is provided. https://images.superfamous.com/

Google Advanced Image Search is a method of finding free-to-use images through Google’s own search tools. Here’s a quick guide. https://www.google.com/

Congratulations making it through

We sincerely hope you have found some great inspiration going through the basic design of a Website. Our Nuc plan guides you through these important process steps to ultimately Design a profound looking Website