When learning about programming, one may come across are two distinct phases
-
Learning about the fundamentals: You start exploring the anatomy of a computer program, learn how to think about simple problems in terms of logic units, and start to formalize these units into instructions of code. At this stage, you learn about abstract subjects and simple practice. If done right and given the appropriate amount of time, anyone would be able to get a solid grip at understanding and writing simple logical programs using a language of choice.
-
The second phase, which most people find a bit more daunting, consists of learning a development ecosystem: the natural next step after acquiring simple programming knowledge is to pick a programming subdomain (web development, mobile application development, embedded systems, and similar) and start to learn about how to solve problems using that specific platform. The difficulty here is that it is no longer a matter of covering a set of fundamentals, practicing each concept, and repeating. It is often impossible to cover every tool, every technology, and follow every principle. The right way to go about this is to do a healthy amount of experimentation and research. Chances are you will only need to acquire a handful of skills, and use a number of tools to get started with simple tasks. Once you are comfortable at this level, you can try to expand into a new set of tools and evolve steadily. Following this methodology, we will try to build a solid foundation in the domain of web development through the exploration of the technologies and tools used for building simple landing pages.
In this blog post, we will do a brief exploration of the frontend web development landscape, with a focus on landing page development. We will go through a selection of resources that we recommend you check out for the different parts of development you may encounter. By the end of this article, you will have a much clearer picture of how to go about building a landing page. Check out this companion video for a practical example.
Landing Page Development Landscape
A landing page is a term initially employed by digital marketing experts to refer to a standalone web page used for marketing and advertising campaign purposes. The concept is rather simple: a visitor interested in a product or service provided by a company clicks on a link of the said product, then “lands” on a web page which has a rich description combining text, images etc. of the product or service. The page contains a purchase button, which is called a “CTA” (Call To Action) in order to convert the visitor into a paying customer. As you may expect, creating a good user experience is paramount to having a good conversion rate.
Throughout this article, we will learn about many ways and tools that will allow us to build landing pages which fulfill their role. It is important to mention that there are other considerations when building landing pages related to SEO (Search Engine Optimization). SEO will be covered in future workshops.
Design Inspiration
Whether you are experienced at building landing pages or just getting started, you will find that it is often hard to pinpoint exactly what you want your website to look like. It is also often the case, when working with clients, that they do not know exactly what design they want for their web page. Usually, the design mockup and prototype would be handed to the developer by a web designer that specializes in this kind of work. It can be helpful to have a reliable source of web designs. Such sources will allow you to keep up to date with design trends, push your creativity, and… get you started. Two of the best resources you can use to get design inspiration for your next project are Dribbble and Behance.
Dribbble
Dribbble is probably the most popular resource in the web design space. It is a community of designers that share their work in order to improve their skills, help one another, and get constructive feedback. It contains a wide range of designs in just about any subject or field made by creative people from all around the world, along with community feedback, making it an ideal place to get inspiration.
Behance
Behance is another popular design community that can help you find inspiration. This website offers advanced search features that give you easy access to specific work you are interested in, using keywords, fields, and color palette. It is also important to note that Behance is part of Adobe, and integrates neatly with Adobe creative cloud.
Dribbble and Behance are both great platforms for web design inspiration and you can't go wrong with either. We encourage you to start exploring designs and come up with your own!
Design Prototyping
Now that you got inspired by the work of talented designers, it’s time for you to start prototyping the design of your landing page. Prototyping is an important phase of building a landing page. It can be defined as the experimental process where you implement ideas into visible structures, so you can refine and validate them with your team or client. By the end of the prototyping phase, you will have a design that is ready to be brought to life on your landing page.
There is a plethora of software solutions that can be used for building design prototypes. In fact, there are so many that it can quickly become challenging to evaluate, compare and pick one tool. We are going to use Figma, as it is commonly used by ux/ui designers. If you would like to learn how to use Figma for prototyping, you can check out our crash course on youtube right here.
Figma
Figma is an all-in-one design tool that makes it easy for UX designers and developers to build and collaborate on design prototypes on a browser-based, cloud-hosted platform. Figma puts an emphasis on simplicity and ease of use.
Figma’s interface allows you to create elements and style them by controlling the appearance of text, grids, and other components across the page. It offers a wide range of complementary plugins, like Autoflow for showcasing user flows, Figmotion for animations, and many more.
Icons and Fonts
Typography and Styling Icons are some of the simplest features to use to elevate the look of any web page. You want to use the right font and icons on your landing page to match the general idea you want to communicate. Fortunately, it is easy to find and apply a large selection of fonts and icons using Font Awesome or Google Fonts.
Font Awesome
Font Awesome is a font and icon toolkit based on CSS and Less. As of 2020, Font Awesome was used by 38% of sites that use third-party font scripts, placing it in second place after Google Fonts (Wikipedia).
Font Awesome is supported by many frontend libraries such as Bootstrap, for which it was initially made. Font Awesome makes the integration of fonts and icons in a webpage as easy as including a CDN link. This ease of use, along with its large selection of fonts and icons made it the most popular solution in the space.
Google Fonts
Google Fonts is a free, open-sourced web service offered by Google for font embeddings in websites. It offers seamless integrations and a high level of flexibility and customizations.
Deploy your Landing Page
Now that you have built your landing page, it's time to share it with the whole! The final step is to deploy your landing page using a hosting provider solution. Github Pages and Vercel are our top picks. They are the most popular, and easiest to use. Vercel is the tool introduced in our workshop, but Github Pages works in a similar fashion.
Github Pages
If you are currently learning to code, chances are you have heard of Github. Github is a platform for sharing and hosting code as part of the open-source community. It offers a feature called GitHub Pages, which is a hosting service for public web pages that can be used by individuals and organizations. All pages are freely hosted on GitHub’s github.io domain, or on a custom domain name if you happen to own one. GitHub Pages are a simple and efficient way to host your projects for free if you are already using Github for version control.
Vercel
Vercel is a Github Pages alternative that offers a wide range of features and configurations. It comes with a free version. We recommend Vercel for anyone with a complex project, as it makes for a great developer experience, and offers great support. Code Labs Academy uses it as part of its development process.
Conclusion
This article introduced useful tools to develop a landing page. Again! The best way of learning is by doing, so we strongly encourage you to give a go to these tools on your own personal project! A big part of a developer’s work is to research existing solutions to problems they encounter, and avoid reinventing the wheel. The great thing about the programming community is its collaborative nature. We encourage you to take advantage of the work that has been shared by others and to contribute with your own!
And if you want to learn more about designing cool websites and building them, then you want to check out our UX/UI Design and Web Development Bootcamps!
