Landing Page for Collecting Donations
About the project
After the full-scale invasion of Russian troops into Ukraine, the work of volunteers has intensified in all corners of the world. The Webnauts team was approached by a member of the Vadim Melikhov Volunteer Team, Natalya Say, who lives in the United States. She had a goal: to help the volunteers of Kharkov to raise funds in support of the Armed Forces of Ukraine and to help people left to live in the most dangerous areas of Kharkov and who are regularly shelled and bombed.
Since the beginning of the war, volunteers have been non-stop:
- delivering humanitarian aid to Kharkiv;
- distributing and delivering food to people living in houses and bomb shelters;
- delivering people in need of medical care to doctors or to the main railway station for evacuation;
- preparing and distributing prepared food to the soldiers of the Armed Forces of Ukraine, as well as providing two military offices with food.
At the time of contacting us, volunteers were in dire need of financial support. Our team offered a quick and optimal solution — the development of a landing page for collecting donations for volunteers in Ukraine.
The objective
Volunteers needed a small and user-friendly website, the main purpose of which is to raise funds for the needs of Kharkiv residents and the military. To do this, we needed to tell about the existence of the volunteer organization itself, about the work they carry out, and to ensure integration with payment systems. Thus, everyone who has the opportunity to financially support the organization could quickly and easily transfer funds in any currency, including various types of cryptocurrencies, to the accounts of the organization’s members.
Implementation
Our team did not hesitate to respond to Natalia’s request and set to work on the project with great enthusiasm. In the shortest possible time, a one-page site was made using CSS/HTML/JS and PHP, with a design that fully complied with the pre-rendered layout. And also made it adaptive for all kinds of mobile devices.
The choice of a one-page site was due to the fact that this type of site allows you to concisely present important information and focus on the most important. In our case, it is donations.
Design creation
Since the theme of the site is related to the war and its consequences, we did not make a sophisticated design,which would waste time on complexities and frills. Taking into account the wishes of the customer, we tried to make the site uncluttered, understandable and easy to use. Therefore, when developing the design, we preferred a simple and light style. The colors of the site were chosen with a certain symbolism:
- white — associated with the kindness of selfless volunteers,
- blue and yellow — the colors of the Ukrainian flag – as a symbol that help is intended for the people of Ukraine,
- and the fact that the site itself turned out to be light and transparent indicates the same intentions of the organization’s members and that the assistance provided will be available to everyone who needs it so much.
The entire one-pager can be divided into seven small blocks:
- «The volunteer team of Vadim Melikhov» — a brief description of what the team does,
- «What We Do» — a more detailed account of the types of assistance provided by volunteers,
- «Support volunteers» by making a donation — the main target block with buttons for payment systems for financial assistance,
- «Gallery» — drawn and implemented with a full photo and video report on the work of the team,
- «Tactical equipment» is a kind of message from fellow volunteers from the United States with a call to collect help for the Ukrainian military,
- «Help for Refugee Families» — with an appeal to “Contact Us” to provide assistance to refugee families from Kharkiv,
- «Team of Volunteers» is a photo gallery of selfless and fearless members of Vadim Melikhov’s team.
Development
Our developers wrote the server part of the site using the PHP programming language.
PHP is an open source general purpose C-like scripting language. It is used to create dynamic web resources and is supported by almost all hosting providers. PHP code can be embedded directly into HTML and has a wide range of features and a large set of built-in tools for developing web applications.
Using a simple code editor and a standardized HTML document markup language, our developers filled out the template by structuring the content on the page. And, using the CSS markup language used for the visual design of the resource, we formatted the content of the site, making it attractive to users. We also used the Gulp project collector.
With the help of this program, we were able to quickly organize and turn a set of individual files into a one-page site, logically structured and built in sections.
Multilingualism
Since the site was originally designed for Ukrainian and Western audiences, we made it bilingual — the user can read all the necessary information in Ukrainian or English. In this case, we implemented multilingualism by creating two pages in different languages within our site. The required language can be selected using the switch at the top of the web resource, next to the menu.
Adding donation forms
The main block of the project is located almost in the center of the one-pager.
Large white buttons are placed on a blue background, indicating various types of payment services and links to forms so that donations can be made in any currency and in convenient ways:
- Credit Card — payment by credit card,
- PayPal is the largest debit electronic payment system, providing contactless payments in twenty-five types of currencies,
- Crypto — payment with cryptocurrency. Here, depending on the type of currency, you can copy the number of a suitable e-wallet in order to make transfers.
Summary
As a result of the work done, in a fairly short time we drew and laid out a bilingual one-page website (landing) to collect donations to recipients in Ukraine. By connecting payment systems to it, we quickly implemented the task set by the customer-volunteer. This functionality has already shown its effectiveness and perfectly coped with the assigned mission: the first donations didn’t take long to come. Thanks to each and everyone who believes in Ukraine and supports in any way they can at this terrible time for our country.
Comments