The best apps for creating websites in 2014
I remember when I tried to create my first own website in 2005, I was only 12 years old. One of our family’s friends had a web developer company and he taught me how to create a webpage with Dreamweaver and Fireworks. I think it’s pretty straightforward that this approach wasn’t optimal for a 12-year-old kid. At the time, I gave up on my dream to become a web designer and web developer.
99% of web users don’t understand how the internet actually works.
This summer in order to create my first digital book — PRESENTation — about presentations, presentation applications and presentation techniques, it was necessary to learn how to code and how to build a website from scratch. As an International Business student, coding was not something I had to learn, so naturally at first it seemed like a huge challenge.
In the past, a paper-based CV contained every significant information about our experiences and skills. Nowadays, we have to put a bigger emphasis on our online portfolio and online presence.
Today, there is no job interview on Earth, where the applicant name doesn’t get checked in Google, so it is worth the energy and the time to create a decent online presence for ourselfs. The good news is, that in 2014, anyone can learn how to build a basic website in 2 to 3 hours.
Of course, there are easier solutions out there for creating websites, e.g. Wordpress, Tumblr or the increasingly popular Squarespace. On the other hand, they can’t provide you with the same flexibility in terms of design, as the good, old, hand-coded websites, written in a simple text-editor.
Coding isn’t that complicated
It’s great to see that more and more people start to get interested in coding and creating there own site or application, no matter what kind of professions they have. As an answer for this increasing demand, there are good companies like Treehouse, CodeAcademy and CodeSchool, which teach you how to code within a few days, for a small amount of money or in most cases, for free.
If you don’t know these sites, I strongly recommend you the check them out as soon as possible.
Design first
After we have the initial idea in our hands, we can start creating and testing different concepts by drawing them.
For this task, there is no better application than the Sketch 3 created by Bohemian Coding.
Mobile first approach
As a result of the fact that more than 50 percent of web traffic is from smartphones, it’s necessary to create a reliable and well-thought-out responsive design for our site.
Why should you choose a mobile view first?
From my experience, it’s always easier to start small and add things on the go. If you can lay out every necessary block, container and information in such a small space provided by smartphones, your design is more likely to look good on larger screens too. If there isn’t much space, you are forced to acknowledge and feel the limit of the available region for your design. You have to simplify your ideas, to avoid too much distraction from the content. Remember that good design is always invisible.
After creating the design for the mobile view, we can continue with the tablet and the desktop versions.
Essential tools for the design process
Sketch 3
As I mentioned earlier, Sketch has changed the way we create our work, and it changed how we approach the design of digital products. Today it’s the best application for designing user interfaces, and it’s very lightweight. We can create prototypes much faster in Sketch, and produce better final results.
In certain tasks some lorem ipsum can be helpful. This app lives in your menu bar, making it easy to throw some filler text right onto your clipboard.
Do you want a particular color from a website or application, but you don’t know if its HEX, RGB or RGBA code? This is the app you were looking for.
In case you are tired of constantly organising your windows to see everything, this app allows you to set shortcuts for screen size and placement. This way you can manage the position of your windows with just a tap of a button.
Let’s turn our ideas into reality
In order to have more than just nice pictures of our website, it’s time to start coding. After writing code for a year, I realized that it has a great effect on our logical thinking and concentration skills. I would make learning to code obligatory in more primary schools, where children can discover and experience the real world usefulness of math and problem solving techniques. Most of us are daily active internet users, and it is worth to learn the basics of what we use every day for several hours.
At the beginning I recommend that you learn HTML 5 and CSS 3, the basics of which can be understood and acquired within only a few hours. (Caution! There is a real chance that after the first successes, you won’t be able to stop coding, while seeing your dream turning into a real, usable website.)
Essential tools for coding
Sublime Text is my go to editor for writing code. I prefer it because of it’s simplicity and the wide range of available extensions.
CodeKit makes real time coding possible for me. It helps in keeping my project as small as possible, through compressing files. This is critical if we want an extremely fast website as a final product.
This app is quite simple actually, it compresses your images. That’s it, there is no unnecessary function.
The #1 FTP client for OS X. This is the most reliable FTP client I’ve ever used and with its iOS version, I can access my server from anywhere, anytime.
Write in stlyle
After we finished our project and there is some content we haven’t written yet (which is worth to do along with the design process), then this is the perfect time to write.
When writing content, I recommend that you learn using a markdown editor, which makes your job much easier and faster. You can convert your text to valid HTML with just a click of a button, without constantly writing <p>, <h1>, <h2> and <a> elements.
Essential tools for writing
iA Writer Pro has been my favourite app for a long time. It walks you through the writing process from rough initial notes to the polished final product. I’ve written more than 200 articles in it. Actually I’m writing this in it as well.
Typed is a brand new markdown editor, which provides you with a unique, zen feeling, alongside a minimalistic user interface. It’s only disadvantage is that the exported HTML code is far more crowded than the HTML code produced by Writer Pro.
To be continued…?
If you want to see more of my writing and tutorials in connection with design&code, you should subscribe to my Design Newsletter.
In my next article, you will read about the 10 most important design rules I’ve learned in the past years.
Looking for a freelance UX/UI designer and front-end developer? Hire me.
