As the name suggests, for this lesson we would be focusing on the second project of the year which is the assignment that this blog is categorized under, B1. This is the progression brief, which will require us to set up and populate a website. It will contain standard elements like an ‘about me’, social links and basic contact info, as well as the bulk content which is examples of the work. To start with, it is best that we keep them simple but keep in mind that they should be professional and reflect creativity. Personally, I wasn’t planning on creating a website before finishing my branding but since that is an ‘outside project’, I have had to take a step back in order to focus on the creative brief. However, lessons and tasks related to the next project keep popping up so I am needing to jump about quite a bit and continue with my brand development in order to keep up.
A website consists of two essential parts. The first is a domain, which is the address for the website, also known as the URL. The second is the Server Host which is where the website is hosted and run on a network connected to the internet. The Server Host is how people are able to interact with the site and although is free at the start, will usually need to be paid for later. Using HTML & CSS, websites can be coded fairly easily but the more popular alternative (and easier) is to use website building services such as WordPress, Wix and Squarespace. Coding, however, is often cheaper since you are not having to pay for a service to do it for you, despite the fact that you have to pay for the domain and hosting and it takes some time to set up.
Note: the website URL, aka the domain name, will have to be paid for and renewed yearly unless it’s given for free as a part of a service like Wix.
An important thing to note is that where possible, you should try to keep your domain information private on who. is via your server host. – When registering a domain, the host will often want you to share your personal information with who. is. Make sure to keep this private since you do not know who will be able to access and view this data, perhaps use it in a malicious way and track it back to you. We actually tested this out for ourselves by going to who. is and typing in our names to see what domains were available and if taken, what kind of information was public about the person or business.
As you can see, I first looked at my full name, Tsvetina, and there are some available, such as .net and .org. The most popular one, .com, is taken and if I scrolled down on that page, I could actually see who had brought it as well as their address. Unsurprisingly, it was a girl in Bulgaria, in a region that I am actually familiar with and I felt a bit scared for her since her information was quite easily accessible. I want to be more responsible with my personal info in the future. Since I have so many iterations or versions of my name, I went ahead and typed in a couple more examples out of curiosity and there were, in fact, quite a few .com domains open for about £10.
I am pleased to know I have quite a few options now – including my main one which is Canvas Owlet, the brand that I am going to be sticking with in the near foreseeable future. I plan to have my own website one day, which means maintaining and paying for my own domain and updating the website frequently. I also need to understand what a good website consists of and looks like, which is exactly what we discussed next – here are some of the key components of a standard site.
- Content/Gallery/Portfolio
- Home Page/Menu/Landing Page
- Contact Details
- About Me
- Social Media Links
- Categories/way to filter the content e.g. Site Title/Header
Some of these can be merged into one, such as the contact details and social media links. But as always, when it is a digital space that belongs to you or represents you in some way, you have creative freedom and can choose where to place what. I have seen plenty of websites that have social media links as icons at the bottom of the page or even in a separate category of their own. We were even shown an example where the animator’s Artstation was linked directly to his site and took you to that page when you clicked the link. Not only does this make it more convenient and easy for clients but also shows consistency and a linked net presence. Bonus points if the header image or profile picture match – stay on brand when possible!
You shouldn’t only think about the components, however, since a website is more than just a single page with links. Or rather, it can be more and in my opinion, preferably should be. I think that sites are incredibly important, especially if they represent a person in a professional sense. They should draw you in, keep you engaged but also be easy to use and not overwhelming. I always look out for a good menu system, minimalism, consistent design and if the site is clear, easy to use and fit for purpose. Those are my personal key points which I give merit for but of course, there are some other equally as important elements to consider, which I have done some research on as well, in preparation.
The main one that I would like to draw attention to is the CTA or the call-to-action, which is a piece of content or part of a webpage/advertisement that encourages the audience to do something. It usually tells them to take some specified action through a written command or action phrase such as ‘Sign Up’ or ‘Buy Now’. They generally take the form of a button or hyperlink and are important for directing the user towards the desired action. Without a clear CTA, the user may not know what the next steps are to purchase a product or sign up for something and are likely to leave the site without having accomplished their task. Not only does a CTA prevent this from happening and make it clear to potential customers which action to take next but also helps remove friction in moving the user down the sales funnel. Multiple call-to-actions can be used if multiple different actions are desired and even if such an action isn’t desired, I think that it is still a good idea to include some sort of button or fun element that the user can interact with to encourage them to stay on the site longer.
Here are some typically seen examples:
- Read more articles
- Sign-up for our newsletter
- Support our sponsor
- Share on social media
- Get started
- Sign up
- Free Trial
- Add to cart
- Checkout
- Buy now
- Add to wishlist
I’ve also included this visual example of a CTA on streaming giant, Hulu’s website. They went for a dramatic approach with a dimmed background showing off all its television and movie offerings, whilst the promotion is in green and white text, drawing your attention directly to it. It’s a sign-up and upsell in one, informing users that they can get a discount add-on with Disney+ and ESPN+ and the CTA works because it entices visitors with the impression they’re getting a deal with the bundle. ‘Get the Disney Bundle’ is placed there strategically instead of just a ‘sign up’ button because it puts the emphasis on providing value to get visitors to take action and also makes Hulu stand out against its competitors. This style is now quite commonly seen with sign up screens because it’s professional, impactful and most importantly it works!
Another feature that I want to bring up is testimonials. Testimonials are positive customer reviews that can take the form of quotes, short videos and more, and they can help boost the desirability and credibility of a business massively. Understandably, most customers won’t trust the product or service being offered right off the bat and will usually need to hunt for some evidence of credible results and customer satisfaction. By highlighting successful transactions in the past, you provide social proof and new potential clients will be much more likely to trust you and your business. Of course, this won’t apply to my website straight away since I am still new to the industry and haven’t put my foot in properly, however for future reference, here are some different types of testimonials.
- Customer quotes
- Case studies and success stories
- Short videos
- Customer interviews
- Social media posts
- High profile reviews
- Press reviews
To obtain testimonials, you can contact returning customers or look for some in social media, in email messages and more. The most common form of testimonials is customer quotes which can often be seen on sites because of how easy they are to acquire and how relatable they feel to the audience. It is best to keep these authentic, use concrete numbers and combine text with visuals for an effective, practical website element. They are an important part of online reputation management and have significant power in converting prospective customers, so by implementing them thoughtfully and strategically, their full potential can be harnessed.
The example that I have chosen to include is a beautiful, floral testimonial box by The Tea Story that evokes the identity of the brand with its eye-catching design. Everything about the box is carefully thought out, such as the quotes themselves which use descriptive phrases like “Peach Paradise” and “subtle yet rich in flavours, in order to make the purchase of the tea hard to resist. Its location on the homepage is also a smart choice since website visitors are guaranteed not to miss out on the positive reviews and take note of the brand’s popularity right from the very start.
Since my site is going to be animation-based however, I did some more specific research by going to the website of different freelance animators. Yukai Du was one of the first recommended sites when I typed in ‘2D Animator Portfolio’ and I clicked instantly because I already follow her on Instagram and I know her style quite well (it was a pleasant surprise!). She is a London-based illustrator and animator with an incredible sense of design. Her work is all about layering lines and dots, creating geometric shapes and vibrant patterns and this carries through when looking at her website.
⇢ ˗ˏ Yukai Du ˋ ࿐ྂ
The very first thing that you see when you click on the site is her name, job roles and some clips of her work playing in the background, slightly dimmed so as to not draw too much attention away from the title. This is bold, simple and gives you the key info fast. There are no categories yet, meaning this acts purely as a header for the website, which I really like! It fills the page entirely and is almost a cover page of sorts, meant to give you a glimpse before you scroll down for more. Her portfolio and different categories follow once you scroll, in the next section and main part of her site. Structurally, everything is minimal and simple but also big, bright and bold, again reflecting her style. There is artwork and GIFs aligned on-screen, each with a link to the relevant page with more info that can be seen if you hover over the square. Some are simply prints and personal drawings, whilst others are just one of many works of art within a project and are described accordingly. This helps me a lot because with my portfolio, I am unsure of how much detail I should share in terms of the making of a project and I can use Yukai’s work as reference. Another thing that I really like is that in her ‘About Me’ section, she not only has the standard introductory paragraph, image and testimonials, but she has also included a client list, awards she has achieved as well as which festivals featured her work and exhibitions, shows, talks and workshops that she has attended or been a part of. This is really cool because it gives you a deeper insight into her professional presence and how popular her work is.
Overall, her website ticks off all of the important boxes. It is fit for purpose, easy to navigate, clear and eye-catching, consistent and entirely true to her personal sense of art. I am drawing lots of inspiration from her format and layout and I hope to one day develop such a unique style that reflects me, which I can include within my brand. We actually got around to making sites for ourselves, however, I will talk about this at the end of this post after I have updated it with the latest professional development lesson that we had.
Context, Content and Social Links
Our second lesson on building a website involved another method that we could consider for the future, establishing a connection with site users and further editing. This method is HTML code, which is how all websites are built, and stands for Hypertext Markup Language. The code defines content on the site as well as how it is displayed and it helps to know a little in order to understand the limitations of web builders. Whilst it is hard to master, it is quite easy to learn and can help with other languages as well such as CSS, C+, Java, Processing and GLSL.
We jumped into a demo by typing ‘notepad++’ in the search bar and opening it up. I didn’t know that you could do coding in it but there we go, that’s exactly what we went ahead and did! The very first most basic code we learned was the diamonds <> which form an object or element when specified with text in between them. Since we wanted to create an HTML file, we typed in <HTML> and copied and pasted it below but with a forward slash in front of the text. This is how to open and close an object, like entering a file and then closing and backing it up. Next, we needed to put in the ‘body’ of the site, by typing in exactly that and following the same diamond bracket format. For some style, we also added colour and then went on to the text. I was beginning to understand that everything followed the basic principles of open, add details & specify, close and what really extends the vocabulary of the code is the actual language itself – the words that correspond to their relevant meanings.
HTML = File
Body = Main part of the site
Style = How the site looks
H1 / P1 = Header & text
(etc.)
By the end of the initial coding, this is what my doc looked like. As you can see, I have added a title and text by writing the words that I want to appear in between the H1 and P1 brackets. I also specified a colour using {background: purple; }. This has its limitations however since even putting in ‘light’ or ‘dark’ in front of the colour name isn’t guaranteed to get you what you want, if it even works at all. For example, I tried ‘light purple’ and after the next step when I could see my website, it went back to white. I tried ‘lilac’ but once again, the program didn’t recognise this so I ended up using a hex colour code to be more specific. But onto the next step anyhow – actually seeing the website in action. To do this, I had to go to ‘file’, ‘save as’ and choose a location and name. However, the file type had to be changed to ‘Hyper Text Markup Language File’ so that it could be opened up as an HTML Chrome link. When I did this, this is what I saw.
Pretty cool! I had made my own website from scratch. It looked very plain however and I knew that I would need to spruce it up somehow. Luckily, we were given the link to a very handy site designed for those learning HTML. It has all sorts of code on there so that you can add whatever your heart desires onto your page. Here is the link: W3School. I decided to keep it simple for now and opted into finding out how to make the text more appealing and readable and add an image. Since I had chosen the lyrics of Bohemian Rhapsody (it was in my head at the time), I stuck with the ‘Queen theme’. One thing that I noticed whilst making my site is that to have something in resemblance to the professional ones, you truly need to be a master. Because what about navigation? What about animation? What about all of those elements that make a site feel more engaging whilst you are exploring it? Ther is surely a method for them as well, but it is probably far more complicated and this turns people away from learning the language, me included! Why would I opt for the method that takes far longer when I can create something more professional with a fraction of the effort? Putting that aside, I clicked ‘save’ on my document and reloaded the site. At the time, it worked perfectly but since I am making this blog from home and I forget to bring all of the downloads (or rather I didn’t know you had to) the image has disappeared. I shall put it below for reference.
Coding was interesting to do but I don’t think that I am going to create any websites using this method in the future. It takes a lot longer to create something decent and you constantly have to be flicking back and forth between the document and the site to see if anything worked. I am more of a visual, creative person than a logical one and I would prefer to see what I am doing as I am doing it and also have more freedom in terms of structure. See, for this site, I didn’t want the text to be centred in that way but if I wanted to change this, I would have to learn how and input the code. All of that, just for the text. A lot of respect to those who have spent time on this craft and know HTML fluently!
Now I am going to talk about what we have been doing for the remainder of the time for both of these lessons. For our own websites, we are using WordPress since it is free and quite customizable. Some things we had to consider:
Context –
They say that a user should be able to understand the context of a page within 20 seconds of being on it since that period of time is all that’s needed for them to make a judgment about whether they want to stay or not. This is why context is incredibly important. It is essentially the core of the site because it should be the first main concept the user grasps and the creativity lies in how they grasp it. What is the first thing they see? How do the images, text and even the website elements help them understand who the person or business behind the site is and what they do?
Content –
So what comes next? The context is established, the audience is hooked and now, it is time to maximise the connection with them. A broad range of skills and work should be shown but not too much. It is best to limit the number of pages/categories on the website and not overshare or dilute yourself too much. Include the best content and give something back to the audience, such as free content or an incentive for business/collaboration.
Social Links –
Finally, there are the social links. If the above two aspects are done well, then the user will most likely want to reach out and contact you to connect further than just the website. For this reason, it is best to ensure there is a contact details page with a business email and at least one other professional form of contact. Including social media can be an added benefit, however, the accounts need to be somewhat formal and entirely relevant, otherwise, it shows carelessness.
I was already aware of all of these things when we were going over them in the lesson and they are part of the reason why I haven’t completed my website nor do I plan to until the end of the project. I am currently in the process of building up my brand, but nothing is complete and I even had to stop with logo development because I uninstalled Adobe Illustrator off of my laptop (lack of space). I had already planned to do all of this, but as always, in my own time so that it can truly reflect me. I did want to explore WordPress however, to get a just of its capabilities and see what I would be working with, potentially, this year. The themes are great, considering everything is free, and I even chose one to start with – Kingsley.
Seeing all of the options and editable features was quite overwhelming, however. In both lessons, I felt lost, since I knew I couldn’t set anything up without my brand being ready and just the sheer amount of what I could do was dizzying. I chose to experiment a little and try to familiarise myself with the program, but I know I will do much more when I have the time and I don’t have the pressure of the Creative Project on me. Until then, I will continue gathering ideas, inspiration and updating my plan for the site and brand overall.