I’m a strong believer that User Experience is one (if not the most) important part when developing software. In fact, it is essential to present any software (from games to apps) to consumers. It doesn’t really matter if you’ve got the most awesome piece of software in the world if your user experience is crap. Simply it won’t deliver the expectations the end user has, no matter how great your idea is. If your UI is too complicated and fiddly, it is possible that a whole bunch of cool functionality will remain buried behind too many clicks because the user doesn’t even know they exist neither has a clue on how to get there!
It is with this principle in mind that I built this website, and I took the challenge as a learning experience. I’m no web designer neither a frontend developer, but it is always nice to get a feel on how other things work outside your own experience. For this reason it is possible that the UX (aka User Experience) between this webpages still sucks and I screw up big times, but I learned a lot just from doing it. Maybe next time will be even better.
So, first I started thinking that the website needs to be readable and easily accessible from most of the devices, in particular mobile devices. There are lots of browsers, smart phones and pads out there: you probably don’t want to miss them! This was my focus point, and all the rest has been developed with this in mind.
So here is a little list of 10 tips that I learned and used. Some are just principles to keep in mind, some are tools that I used.
- Bootstrap helps A TON with regard to different screens’ resolutions that you have to deal with. Thanks to that, it is now really easy to access my website from different devices, especially from smart phones. Note that this website works on top of WordPress, so we can say that this is a theme for WordPress. Check This out if you want to know how I did it, it helped me a lot. Also This.
- Keep it simple! I started that I wanted to have loads of cool looking shiny stuff, but I ended up having a website that was too noisy and it just felt complicated.
- For the same reason above: The less the better! Don’t overload the user with too many information that doesn’t need yet, but instead make it simple to “reach” the information he is looking for. That’s why I chose to have just four big colored squares on my home page. Each one is nice and simple and you get straight away where they are pointing to.
- Flat design. I chose the art and the colors all by myself, but before that I did some research on what a good design should look like. Turns out that the trend is the so-called flat design. Just search for it on google and you’ll find loads of articles about it. It basically follows the rule of no shadows or highlight in your art/buttons/gui and instead it adopts just pastel and contrasting “flat” colors. This apply perfectly to my idea of “keep it simple”.
- Mouse clicks are different from touch screens. Test the pages both on your smartphone and your pc! Some ideas can be super cool and working perfectly when you have a mouse and keyboard, but what about touch screens on mobile devices? That hover effect is simply beautiful when you got you arrow on it, but it doesn’t really work with touches! For instance, the titles for each entry in my port folio page appear only on hover! Try to keep them pressed from a smart phone… It’s just a mess.
- Get feedback! A good piece of advice that I got is that the flat buttons on the home page do not really feel like buttons, especially when you click on them. This is because nothing happens on click so you don’t really know if you pressed in the right area or not. That’s why I added an on-click effect on them: At least you know that something is happening!
- Use custom fonts and match them. While reading some articles I discovered that the trend is to use two custom fonts in you website. Initially I didn’t even know you could load and use different fonts from the default ones that are supported by the browser! So look online for cool custom font matching, choose the ones you like and make them yours!
- Talking about fonts, Font Awesome makes a great font for icons. I’m using it in the navigation bar for github and Linkedin icons and many more.
- Learn from the best. I read quite some material about flat design, bootstrap, color matching, fonts. Since I’m not an artist, I simply got big inspiration for colour patterns, designs and ideas from others that are better than me! For instance, being a windows phone user, I decided that my website would look like the WP home page metro style. I think metro style is gorgeous and it applies perfectly to my focus point. Big simple squares also make it ideal for a responsive layout!
- I wanted my website to feel like an app. Do you check your Facebook through your browser, or do you use the app? How about you Twitter feed? It’s much nicer to get a layout that is designed to feel good on a small screen, where everything is under the reach of your thumb, rather then having to zoom in and out continuously just to press a button.
So this is it. Maybe some principles are wrong and maybe are not applied at best on this website, but I think there is some good stuff in it that could be helpful.
I did my best for this website and I’m quite proud of it, having done everything on my own. If you enjoyed the article you can check the source code for this WordPress theme on my personal Github repository here.