How to design and code a simple landing page with Stripe integration in 2015?
In my last Medium post, I told you the story behind YUROP News, a brand new service I’ve created with a friend of mine, Andras Toth.
We’ve learnt so much during the design and coding process, and we’d like to share some of these useful tips and tricks with you.
I wish I would have found such an article before we got deep into the world of flat responsive design concepts, PHP codes, Stripe integration, and SSL.
I hope this post will help you a lot, so let’s grab a coffee and start designing and coding our own business idea.
Drawing around our first intentions
Before we begun the design process, we had a rough idea, what kind of landing page we need for YUROP News. We wanted to create a flat, simple, easily understood showcase page for our service.
To get some inspiration, we went through the latest projects posted on Dribbble and Behance, which showed us what are some of the current web design test, and what we need to do differently. In addition, you should take a look at the work of some of the most inspirational designers I know: Meng To, Tobias van Schneider and Jean-Marc Denis.
Designing the logo
The logo is the most important aesthetic element of a brand. It has to be legible in super small sizes, while it has to look good in fairly big sizes is well. It has to be unique and show relation to your product or service. On top of that, once you have your logo you cannot really change it.
We created more the 10 versions of our logo. In the near future, we plan to do an iOS app for our service, so we focused on the iOS app icon as a logo.
After many hours of thinking and trying out different ones, we have finally found the perfect logo for us. It’s simple, it’s connected to our service in meaningful ways and it looks great in every size.
We used the flag of the European Union as inspiration. The blue background symbolizes the “blue sky of the western world” — as the Council of Europe put it some 60 years ago. The twelve stars in a circle represent unity. This together shows that our service has a European theme and focus. The “Y” in the center both refers to the name of the service and “You”.
Designing the website in Sketch
Before we design the layout, buttons or icons, I always start with typography. I strongly believe that typography is the most important tool for communication designers have at their disposal.
Typography
In my projects, I try not to use free fonts if it is not required by my clients. I fully agree with Tim Brown’s opinion that using free fonts is actually more expensive than using paid fonts.
Since we are a new service on the internet, we chose a modern, sans serif typeface. On the other hand, we are dealing with news, which has a huge historical background requiring a serif font.
This is how we ended up choosing a sans serif font called Freight Sans Pro, which is the sans version of the famous Freight Text Pro family. It’s a €240 font provided us by Typekit.
Mobile first
Nowadays, it’s hard to imagine a website without a responsive mobile view. In my view, it’s always easier to start in small and grow along the way, so let’s start with designing the mobile view of our page.
During our design process, we used Sketch, which is the best tool for creating flat and modern user interfaces.
To determine the perfect layout for our purposes, we constantly used Modular Scale. Modular Scale is originally created by Tim Brown, Type Manager for Adobe Typekit and it allows us to develop a layout around a famous mathematical number like golden ration or perfect fifth.
Tablet and desktop views
After we’ve finished with the mobile view, we scaled up our design for the iPad and desktop. We tweaked even the smallest details until we felt that it is right both on the iPad and Mac as well.
Let’s build our dream
Without coding, we would only have a couple of nice images. Originally, this was the very idea, which pushed me forward learning coding as a designer.
“What was stonework at the age of Leonardo da Vinci, know we call it coding. Without stonework or coding we have only images no matter which age we are living in.”
HTML & CSS — the world around us
To have a better understanding of the online world around us, I recommend to learn some basic HTML and CSS codes. With the help of these two basic programming languages, you can almost build anything you want, at least in terms of design.
It’s a magical moment when you finally touch your work, your idea and navigate thorough your dream at the first time. This is the moment when you feel, you finally created something.
From my viewpoint, nowadays the best place to learn website programming is an online video website called Treehouse. I also learnt coding here and I created my first hand-coded website within just 4 hours. So you have no reason not to start it immediately.
We used PHP and Sass
Using PHP was required only because of the Stripe system, otherwise we could just use HTML5.
Sass is a the most powerful CSS extension language, which helps you to write CSS codes at least twice as fast as before. The outcome is still a normal CSS file, but with a few tricks you can write complete paragraphs of CSSs with just one word in Sass.
To add a final touch to our work we added some custom CSS animations, which give a more premium look and feel to our final product.
Stripe integration
Stripe is the most advanced payment system both from designer and developer aspects. After the first time I used their payment checkout I immediately knew that I wanted to use it in my own projects as well.
While creating a one-time payment form with the PHP version of Stripe is fairly easy, the subscription model was a little bit harder for me as a designer. We went to look for information in their API documentations, but we struggled to find the perfect lines of code.
After consulting with a real developer, it turned out that we only needed one extra line of code to create subscriptions. The whole Stripe payment system is not more than 20–25 lines of code! (Our stylesheet is approximately 1400–1500 lines of code.)
The best part of using Stripe is it’s security. The Stripe payment form is hosted by Stripe, which means that whenever the user starts typing in their credit card numbers, they are typing it on the Stripe server. On top of that, the credit card details for the subscription are also stored on the Stripe servers, so the users don’t have to believe in a “noname” company, but in Stripe. It’s definitely the best solution for everyone.
SSL encryption
In order to increase the trust and the security of our site we also added an extra layer of security by implementing SSL encryption.
Installing SSL encryption could be really frustrating for the first time.
We brought a Positive SSL certificate from Namecheap. You need a separate server for every domain you want to install this on. You need to configure SSL precisely so it works with Stripe, and you need to make sure that you don’t use older, vulnerable SSL protocols, that can compromise the security of your website.
After hours of fixing SSL-related issues, we got an “A” rating from Qualys SSL test site, so it was definitely worth the time.
DigitalOcean — the space where dreams become reality
DigitalOcean completely changed the way we look at web hosting. Before DigitalOcean we were limited to using cPanels and really slow servers or really expensive ones if we wanted an SSD based configuration.
DigitalOcean allows us to use SSD servers the way we want to without any limitations. Of course it also means that we had to completely configure a server by ourselves, using SSH connection in Terminal, but it was a lot easier than it sounds.
The tutorials provided by the DigitalOcean team are priceless. You can setup your own server for the first time within 1–2 hours even if you’ve never done anything similar before.
Conclusion
That’s it! This is how you can create your own small business within just 2–3 days from the very first ideas until a completely working website.
After finishing our project, we had to realize that nowadays it’s easier to build anything online than ever before. If you think about it, creating this project would have taken 1–2 months a few years earlier. But with the tools available today it only takes 2–3 days. It’s crazy!
So don’t just sit here, go and build you dream project you’ve always wanted to!
If you have any questions or you need any help during your design process feel free to ask us. We would be happy to help you. ☺ hello@yuropnews.com
