Landing Pages
Web Hosting & Domain Names
At the beginning of our lecture we covered the basic principle of web hosting and what is needed to ensure your website is live and running smoothly. Web hosting is extremely important as this ensures your website is live 24/7 with very minimal downtime, the website is stored on a server which is then retrieved from that server when he user types in the URL of that specific website – otherwise known as the domain name. WYSIWYG applications like Webflow, Wix, WordPress and others allow you to publish your website to the internet but they’re usually displayed with their company name in the URL along with a bunch of numbers which can look really ugly and unprofessional, to fix this it is important to purchase your own domain name and use a re-direct to allow you to link your new URL to your web hosting service. There are a few ways you can purchase domain names, one of the most common ways is through 123Reg.com where you can type in the name you want as your domain name, for example your brand name, and it will list options and price plans for you.
Lately I have been looking in the NFT space and how this new emerging technology can be used to help us build a better future in a variety of different industries including art, music, finance and business. When I was researching into NFT’s and what they were I noticed that you were able to purchase domain names that are based on certain blockchain platforms like Ethereum and Solana, these would be displayed as example.sol or example.eth as opposed the example.com to example.co.uk.
Dream Host
We looked at DreamHost which is a web hosting platform that allows users to publish websites to the internet with very minimal downtime, there are a lot fo options for web hosting in the current market today which makes it difficult to choose which one you want to go with but its important to choose one that is cost effective and reliable as you don’t want your website crashing when you get a lot of traffic but you also don’t want it breaking the bank either. Dream Host is one option that is cost effective and reliable which was recommended by our lecturer Daniel, he is an avid user of DreamHost and still uses it for projects at the moment. I have always been a little confused on web hosting and how websites go live so this was helpful to known that this one is used by someone I know and is reliable and cheap too.
Landing Page Contents
Landing pages are often considered as a single page website which describes a brand, product and/or service, these could either be extremely simplistic and just be a singular hero page with basic illustrations or application mockups or they could be more detailed and include certain elements like brand guidelines, applications features and other elements that help describe the product or service from that particular brand.We started to looked at what sort of content could be used for a generic landing page and what content could be included for a banking application landing page, for a generic landing page it would usually included a logo, social media links, play store links, brand motto, product features and other small elements but for a banking application it would be more tailored towards a digital field meaning it would include elements like device mockups, application features, brand guidelines, brand story and mission statement in addition to other elements like how the application is better than other applications in the market.
Brand Style Guide
Brand guidelines and style guides are a good additional element to a landing page, especially for branding, as it allows you to show to each element within the brand works together to portray the brand in the way they intended. This could included elements like the colours the brand use, their story and what they aim to achieve, what typography and iconography is used, how images are used throughout the brand and other elements like animation and videography. This is something I will consider including but I don’t think this will be my main focus for my landing page as I want to really represent the features of the brand and how they aim to build a better future for their customers.
Brand Story & Mission Statement
The brands mission statement is a great addition to the landing page as this will show the customer what the brand is about and what they aim to achieve through their products and services, this should draw more attention in comparison to other content and should be one of the main elements of the landing page as this will define whether the customer joins the brand or not as it will create a foundation for an emotional connection between he brand and the customer. The brand story is also a good addition to a landing page as it allows the brand to really let the customer known where they came from and how they got to where they are today.
We were asked to create a mission statement for our brand if we hadn’t already created one for our modern banking brand, I have included my brands mission statement below to demonstrate what sort of content could be included in my landing page.
Mision Statement:
“We aim to provide our community with the financial tools to help them build a better future.”
Body Content & Images
I need to decide if my landing page is going to be primarily text based or image based, for this I really need to consider my brand guidelines and what my brand is about and what type of personality they have. As my bank brands target audience is of the younger age group I think it would be a good idea to focus more towards images as millennials and get-z’s are more visual people, that being said when text is included I think it would be a good idea to keep it short, sweet and straight to the point. As my brands product is a digital banking application I think it would be a good idea to include a lot of device mockups to demonstrate the applications features, as I gave my brand a dark theme colour palette I think this would work well having a bright what screen on a dark background to really highlight the visual elements. I also want to include the brand application content I created for this project as I really liked how they came out and I think they suit the brands style and personality really well.
Placeholder Text vs. Real Body Copy
We briefly discussed the importance of using real body content over placeholder text like Lorem Ipsum, the main reason behind this is that real body content will give you a more realistic representation of how the final website will look whereas placeholder text and repeated text will usually form patterns within the content which looks unrealistic and out of place on a web page. While Lorem Ipsum is good for generating content to create quick layout ideas its important to try and curated content for that specific project as it will allow for a more realistic design, this will also create a connection between the brands product or service and the content.
I have included an image below of the differences between placeholder text and real body copy.
Content Organisation
Ranking and organising your content is extremely important as you want to show the most important information first to show the user what the brand represents and what they have to offer. We went over the technique we previously used at the start of the project which allowed us to rank the needs and wants of the user to help us lay the foundations of our brand, this time we applied the same method to our landing page content. We were asked to create a list of content ideas that could be included on the landing page for our banking brand and then go through them and refine them into an order of importance to allow us insight into what content should be displayed in terms of hierarchy. I decided to get some ideas from other landing pages and banking apps to help give me some insight into what they have included on their web page, looking at other banking application landing pages really helped give me an idea on what should be included on my landing page and what I should be showing to the user first.
I have included an image of my content organisation below to give you an idea on what content I aim to include in my landing page.
The Osborn Checklist
The Osborn Checklist is an ideation and idea refinement technique created by Alexander Osborn, this technique is designed to help refine a product or idea and find new solutions for the problem at hand. Commonly referred to as SCAMPER, the Osborn Checklist is a series of questions put in place to refine the content of a design to help find the best solution possible, like what could be subtracted from the design to bring more attention to the content with more importance. I have personally never heard of the Osborn Checklist before so it was interesting to know that there is a template for refining ideas which I could use for future projects or even use as a foundation to develop my own design checklist.
I have include some screenshots of the Osborn Checklist slides below for future reference.
Landing Page Design Inspiration Resources
During our lecture we went through some resources that could help us get inspired for our landing page designs, these were additional resources that extend beyond the basic sites like Google, Instagram, Dribbble, Behance and Pinterest. While these website are good for sourcing inspiration I have found that they usually have the same designs or the same ideas featured on them which can lead to repetitive design, having extra resources that are regularly updated can be extremely helpful for keeping up with current trends and getting inspired by new ideas and designs.
I have included a link to some of these website resources below for future reference.
Introduction To Webflow
During our lecture we had a workshop from Kyle who went through the front-end development and web design application Webflow, due to having training at work I was unable to make this workshop but I have previously looked at Webflow in the past and used it to build small projects before. The being said I have coded website before using HTML, CSS, SCSS and JavaScript so I’m unsure if I will use webflow to build my landing page for my branding project. As I missed out on this workshop I do plan to catch up on what I missed by using the Webflow University section on their website which will teach me some of the basics of the applications and allow me to brush up my skills a little bit, for now I want to focus on the getting my landing page designed and the content thoroughly thought out as I think I could code a one page website in no time at all due to having done this in the past.
At the start of our lecture we were asked to sign up for an academic subscription for Webflow to allow us access to more features without having to pay full price for the product, I found this great as this is something that I could use for client projects it some come up later on down the line. I will be making sure I utilise this resource as much as possible in both the learning aspect and the use of the actual application to build websites either for myself or for future clients.