How we engage with the web
What are the different uses/types of website?
There are around 8 different types of website on the internet.
E-Commerce Websites
E-Commerce websites are online stores making it convenient to shop from the comfort of your own home. E-commerce websites enable business owners to run and maintain their store from a home or office environment without the need for an expensive shopfront. This type of website also incorporates a checkout cart in order to allow you to purchase directly from the site.
Blogs
Blogs became popular in the early to mid-2000s. This kind of website operates in reverse-chronological order and can either support a second website or stand-alone in its own right. Blogging is very popular as it allows direct and personal interaction with your fellow bloggers who can post their comments directly on the website.
Personal Websites
Personal websites are made by individuals for friends and family to share information and pictures with each other. This kind of site has limited use for businesses as they are generally not set up properly for SEO and therefore not search engine friendly in their setup.
Photo Sharing Websites
These websites have one purpose which is to enable the user to upload, download and share photographs online. Generally free to use like pixabay and unsplash, they have many practical uses particularly for those in the artistic and photographic industry who need free quality stock photos.
Informational Websites
A little like the Yellow Pages of the internet these sites provide information on a particular subject or subjects to the reader. Online dictionaries, local councils and real estate companies are examples of informational websites. They provide you with information that you may be seeking as well as further details on how you can contact the company if needed. Giving addresses, telephone numbers, links to websites and maps
Brochure/Catalogue Style Websites
An online brochure based website is more than just for informational purposes as it goes further in-depth to provide information about products which are available to purchase. This differs from the traditional e-commerce website as it doesn’t have the checkout facility available online to purchase immediately. A website such as IKEA offers a perfect example as you are able to browse stock online and check availability, however, to purchase you must visit your nearest outlet.
Social Media and Networking Websites
These websites are a combination of networking sites such as Facebook and Twitter, although they can also integrate online forums. They are created purely for socialising and discussing topics. Social websites enable one to one connections between individuals.
What are the benefits of having a website?
Cost-Effective
Online advertisement is a more cost-effective way compared to a print advertisement which can be expensive, it enables you to make on-the-fly changes, given that you are using a content management system such as WordPress.
Wider Demographic Reach
Unlike a local brick and mortar establishment, a website enables you to get your business profile around the world. This leads to enhanced exposure and sales due to a wider demographic audience.
Business Credibility
If you have a professional made Website, customers are more likely to consider your business credible rather than companies who either do not have a Web presence or have a badly designed Website.
Around-The-Clock Availability
Having a Website provides your customers with 24/7 access in terms of access to products, information etc. This type of 24 hours a day, seven days a week service definitely generates more profits than that of a traditional storefront.
Increased Sales
When you own a business, exposure is the key to attracting customers. A well designed and easy to navigate website with great content dramatically increases the probability of sales.
Customer Rapport
An online presence helps in terms of building a rapport among your customers. Providing special offers to loyal customers on your website lets them know you appreciate their business.
Competitive Opportunity
your competitors will most likely have a website and will be using it to their fullest advantage. In order to keep up or surpass the competition, having a website is a must.
Targeted Marketing
A strategically planned Website can effectively attract the targeted audience you seek. This can be achieved by SEO within your site.
What is SEO and why is it important to businesses?
SEO stands for Search Engine Optimization, this is a process that optimizes your site and enables it to receive organic or unpaid traffic to your site from search engines. This involves making changes to your website’s content and structure to make it more appealing to a search engine in the hope that the engine will list you near or at the top of the first page of results.
Search engines crawl websites looking for relevant content and keywords, phrases or both. It is important when building your website that you include these. Most people who build websites with site builders such as Wordrpess can install plugins that help set this up. A plugin is a program that runs in the background of your website doing whatever you programme it to. there are many SEO plugins, however, if you are running a WordPress site then you will probably be using YOAST as it ranks best available.
If however, you have coded a website from scratch then you will need to manually optimize your site within the source code you use. Source code is basically HTML, CSS, JQuery, JavaScript, etc that your website is made up from. Below is a screenshot of some of my own source code from my website.
Google and other search engines will crawl your site to see what it is about. They do this by reading your source code and looking for key pieces of code, below is some of the code that Google will target when crawling a website
Title Tag – The title tag on each page tells the search engines what your page is about. This should be 70 characters or less, including both the keyword your content focuses on and your business name.
Meta Description – The meta description on your website tells search engines a little bit more about what each page is about. This is also used by your human visitors to better understand what the page is about and if it’s relevant. This should include your keyword and also provide enough details to tell the reader what the content is about.
Sub-headings – Not only do sub-headings make your content easier for visitors to read, but it can also help improve your SEO. You can use H1, H2, and H3 tags to help search engines better understand what your content is about.
Internal Links – Building internal links, or hyperlinks to other content on your site can help search engines learn more about your site. For example, if you are writing a post about the value of a specific product or service, you can link to the product or service page in your blog post.
Image Name and ALT Tags – If you are using images on your website or within your blog content, you will also want to include your keyword or phrase in the image name and alt tag. This will help search engines better index your images, which may appear when users perform an image search for a certain keyword or phrase. When placing your SEO keywords and phrases on your pages, it’s important to avoid over-optimization. Google and other search engines will penalize your page if it attempts to use keywords too many times throughout the content.
What makes an effective/in-effective website?
The first thing to think about when designing a website is your content. The most effective websites on the internet are simple, easy to navigate websites. Don’t over-design your pages with too many elements. It may seem cool to have lots of flip boxes and animations on your site but these can easily distract your viewer from the purpose of the page and make the page difficult to navigate.
Be consistent throughout your web page. Set a colour theme of only a few colours that you will use and stick to these. Your fonts, sizes, headings, sub-headings, and button styles must be the same throughout the website. This is where a little knowledge of CSS (cascading style sheets) comes in handy and helps organise the hierarchy of your pages.
When writing content for your website, think about your font choices and weight of the font (size). Make sure you use fonts that are easy to read such as Myriad Pro or Helvetica. Using a font such as Helvetica that has a family will also help you with Hierarchy.
Make sure your site is responsive. Build your site so that it works across a number of platforms such as desktop, Mobile phone and handheld tablets. Also, optimise any images you use on your website. Optimizing your images will make your site load faster, especially if you are using lots of images.
Finally, make sure your site is easy to navigate and that your selected audience can easily access the information they require. Make sure links work and menus are correctly structured.
Below are a couple of screenshots of effective websites.
This is a portfolio site of a Paris fashion photographer. It uses a simple menu on the left to navigate the different pages of her photoshoots and the landing page is a high-quality photograph. Minimal colours nice font choice and simple navigation system immediately tells the user they are on a luxury website.
Japanese, Women’s fashion website makes use of bold fonts, simple 4 columns structured image gallery with the information below the image about the product. Simple menu to navigate around the site and the only use of colour is in the photos.
I now want to show you what I think are examples of bad website designs.
Very cluttered website, far too many images on the page. Too many colours and different fonts, too much text.
Again, too much going off on this site. low-quality png files with images. Animated gifs look cheap. lots of different fonts and too many colours. Overall looks cheap and tacky.
What are the ways we access the web today?
There are a number of different ways that we can access the web. Probably the most popular method is the use of a smartphone or tablet device. Other ways are by computer using landlines or wifi, games consoles can now connect to the internet as well as televisions. For a full in-depth look at the demographics check out this link
What are the strengths/weaknesses of modern web devices?
The strengths of using these devices such as your phone, laptop or tablet are that you can access the internet anywhere as long as you have a wifi connection. Most services also provide some sort of cloud storage so that you can also access important files and documents without the need to carry external storage devices such as USB sticks. The disadvantages of this are that sometimes a wifi signal isn’t strong and causes your device to preform really slow or not at all if you can’t receive a strong enough signal.
Elements of a WebSite
This is a simple but effective 4-page design with a minimal colour pallet of white, black and grey. The header is nice and large although a little hard to read and the menu is clear and easy to navigate and the text is easy to read with the use of a modern sans serif font. The portfolio is well organised into 4 columns and the images are clear and optimized. Each image takes you to another page with more information about it, this is something I am trying to do on my own site. The images also interact when you hover over them turning to white squares with a small sentence about what design it is. There are no other interactive elements that I can see and this keeps the site nice and simple and really easy to navigate. If I was to change anything I think I would remove the padding from the portfolio gallery so that each image touched.
This website is a 7-page design with sub-menus. At first glance, it looks easy to navigate with the menu stretching across the screen, however, once you begin to click on images, it sends you to other sites such as Instagram. The portfolio looks too big with only two columns and the images are very big filling the whole screen. Because they seem to have not been optimized correctly, the images can look a little pixilated too. Ther is a footer halfway down the page that splits her portfolio in half with the bottom section linking to her Instagram account. Because the images take up so much space there is no coherent colour palette that is obvious which makes it feel very disjointed when viewing different pages of the same site. I would definitely change the portfolio structure and make it at least 3 columns if not 4, and I would place the footer where it is supposed to go (at the bottom of the page) I would also get rid of the linked Instagram portfolio and just use the widget in the footer to link to Instagram. I would probably make the menu sticky also so that it is easier to navigate when you have lots of pages.
A very effective 4-page website that uses bold flat colour backgrounds and minimal text. Although it is best to stay clear of too many fancy elements in your web design, this design utilises some really good elements without detracting the viewers’ attention. Nice use of parallax scrolling with text elements sliding into view gives the site a very fluid feel. Minimal use of imagery and also using black and white imagery against bold coloured backgrounds give the site a good contrast that makes the text and images pop. Also, the playful nature of the content and the way it is rendered tells the viewer that this design company is fun to work with while remaining really professional. I can’t find anything I would change on this site.
Self Promotion Online
What are the various platforms/methods for promoting yourself online?
There are more social media platforms than ever before to help you promote yourself as an artist/designer. The obvious is Facebook although this is more of a social networking platform it is still used by 2.37 billion people worldwide. Instagram has 1 billion followers while Twitter has 330 million users. Instagram is like a portfolio website that you can upload images to and also follow people and talk to them like facebook, while Twitter is more like a blog for people to post and interact with each other. LinkedIn is a more professional media platform linking people together and has 303 million users, it is aimed at professional people linking like-minded individuals together to expand their professional reach. Tumblr is a microblogging and social networking website hosting 475 million blogs. Pinterest can be described as an image bookmarking site and has 291 million monthly users. Reddit is part discussion forum and part content submission where the users control what trends at any given time by upvoting or downvoting posts it hosts 330 million active users every month.
There are also niche platforms such as Dribble or Behance that act as a design portfolio platform for designers to share their work online.
What is the USP of each particular promotional method?
The unique selling point of most of these various platforms are very similar, for instance, its easy to create a profile and all profiles of other users are the same. This makes navigating the platform easy when you are looking at someone else’s profile. You can join or create your own groups that connect people with similar interests. Some platforms allow the user to send and receive messages and phone calls free of charge, this is good for staying in touch with people overseas. You can link your business to your account and send invites to people who might be interested in what service you have to offer. This is good for networking and boosting your online presence to gain more sales. You can store unlimited amounts of photos on various platforms, this reduces the need for expensive home data storage devices.
What are the limitations/issues?
The issues that all or most of these platforms share is a question of security. They can be prone to cyber-attacks and scammers gaining your valuable information. In some cases, fake accounts can be made to con people and in extreme cases to target the vulnerable or children. Online bullying can become a problem and is more difficult to detect.
How can they benefit a designer/creative in particular?
The benefits a designer can gain from some of these platforms is the exposure to the creative world. Platforms like Behance, Dribble and Instagram can instantly connect you to millions of creatives worldwide. You can easily display your portfolio or make links to your website. You can sell downloadable content, gain invaluable knowledge or just make new contacts in the creative world.
Methods of Web Design
What are the various methods/tools for designing online content?
Today there are many methods for designing online content, most common is now the online web page builders such as WordPress, Wix, Squarespace, Drupal etc. These offer the user a fairly simple interface allowing them to upload a theme from a growing catalogue of different themes such as portfolio, photography, business, sport, and allowing the user to alter the content such as changing the text and images to make it personalised to their needs. With that said, however, you do need a little knowledge about how these programs work. Webflow has, however, claimed to have solved this issue by making an all in one site that not only allows you to make your site but also host it for you and have 24-hour support. Other hosting websites that host your domain are also beginning to see the financial benefit this offers and have begun to integrate their own web page builders such as Hostgator
Adobe whos software caters to the digital design world have begun to roll out their own software for making webpages Adobe while also offering a social platform called Behance that exists to connect and showcase creatives from around the world.
Older ways of building online content could be by using software such as Dreamweaver. This would need the user to have a basic knowledge of HTML and CSS, however, and this is becoming a now redundant format of online content design.
What are the strengths/weaknesses of each method?
The strengths of each method are that you will have 24-hour support from most platforms with the advantage of being able to connect and speak to an expert any time. Also once you learn to use these various methods, you cut out the need to hire expensive programmers to make and maintain your site. Unfortunately, the platforms keep changing and updating at a rapid rate and you constantly need to be learning new skills. Security can also be an issue if you are not familiar with how to set up a secure website you become prone to attacks.
What help/support is available to help develop your understanding of each method?
There are plenty of ways in today’s society to help support those that are challenged by the worlds fast-paced environment of the digital world. There are books that can be purchased or even downloaded to inform the student. Other ways are to find an online blogging site that supports the information, here you can ask questions in the forums about specific subjects and receive feedback almost instantly from other users of the site. Youtube has an endless supply of free tutorials about almost anything you can think of. Other people may charge you a small fee to watch a specific tutorial or even full academic course that you can access and watch or download online.
How could you develop your own knowledge of each method?
The best way in my opinion of developing your knowledge and keeping up with the software is to use it on a daily basis.
My Website Design Concepts
Below are my mockups of website design ideas that I am going to try to emulate in WordPress.
Design #1
I want a single page design with minimal content, The site needs to tell my viewer what services I can provide and then a simple gallery of some of my work. The gallery images will link to a separate page with a full-size image and a breakdown of the concept design. A button will also link back to the gallery.
Design #2
This is a similar design using 3 colours and minimal content.
Design #3
I decided to really strip back the colour and just use two main colours, the background for the entire site is an off white #e6e6e6 and all the content is a cool cyan #5abfb5. All the fonts are in Helvetica with varying weights for headers and paragraphs. The only colour you will see is when you click on a portfolio picture, this will link to the full-colour image on a different page.
I think by just using two contrasting colours, the website really stands apart from lots of other design sites out there.
Follow this link to the actual live version of my site.
How I built my site and the Plugins that make it work.
I began to build my website using the Salient theme builder by Theme-forest. This theme comes with all the plugins needed to start creating a site from scratch or by starting with one of their free themes.
I personally prefer to build my site from scratch as it looks more personal to you. The Salient theme comes with WP Bakery installed for free. This is basically the software that will be used to build the site. I personally like to use Elementor Pro, however, I decided it would be a good experience to learn a different page builder. Like any design process, I start by jotting my ideas down on paper before going into Illustrator and starting to bring in the design elements. Once these elements have been designed I am ready to begin using the page builder. By now I have saved any images that I will be using and they are all optimised for the web.
To begin building any website you first need to generate a container to put your content in, these are usually called rows in your WP Page building software. From here you can begin to add text and images. You can also split the rows into columns to help you arrange your content. This is pretty basic stuff and once you have structured all your pages you can then get into the settings. So you can start making background images act n a certain way or portfolios look and act another way. all of this takes place in the back end of WordPress and is far too complicated to go into depth with how each element works and reacts.
One of the problems you will face is that some elements won’t react how you want them to, which can be quite frustrating at first. This can be solved by the use of a Plugin. A Plugin is an additional piece of software that you can install usually free of charge, and there are hundreds to choose from that have a myriad of different functions. Below is a list of the plugins that I have used to make my website respond the way that I want it to.
Most websites that are built well usually need a form of some description and the most used plugin is contact form 7, however, I find the interface complicated to use and the backend is limited as to what you can get your form to do. I found that Happy Forms was a very easy to use, free plugin. It has an easy to use interface that allows you to see changes in realtime. you can do so much with this form builder that other ones restrict you from. Once you have your form the way you want it, it is then generated as a shortcode. A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, code in just one line. Shortcode = shortcut. Link
Whenever you build a website it is more than likely that you will use an image somewhere within its structure. this could be a photo that belongs to you or artwork that you have made. The last thing you want is people stealing your intellectual property. You can accomplish this by installing the above plugin that basically disables anyone who visits your site the ability to click and save your images.
A website needs to be optimised for google to be able to find and list it properly. This is the top plugin that makes SEO easy. There are a few tricky parts to get this plugin working properly, however, there are lots of tutorials on Youtube etc.
All in one WP migration allows you to make a back up of your site and install it on a different domain. It also is really useful for making a backup copy of your site in case you need to reinstall in the event of someone hacking your site.
By law, all sites now need to tell the viewer that their site uses cookies. There are many plugins that can do this, I used this one.
I don’t know much about website security, however, I have been recommended to install this plugin to make my site more secure. This does not cover SSL however and you will need an additional plugin for this.
Some theme builders allow you to have a menu that sticks to the top of your page. These are great for one-page scrolling websites when you want your menu to remain at the top. Some page builders, however, don’t have this feature and this plugin allows your menu to stick to the top.
Gavsters-blog 