8 steps to create world-class UI and UX for your startup

Have you ever started a UI project and found yourself struggling to come up with a good design?      
Or you mix and match based on your intuition but the end result is just mediocre? 
Are you a web-designer or web-developer and want to learn UI and web design in the most effective way possible? 

I am not a web designer but circumstances have led me to learn the art. Today, I don’t think I have outstanding design sense, but I sure can tell you how to create outstanding designs. In this article, you will learn what tools I use to research on design and what exactly I am looking for. You will learn how to decipher any webpage you find and make your own version of it. You will learn the tools, the tactics, the workflow and ‘books and resources’ to learn from.  At the end of this article, you will have a good idea of how to swagger jack any webpage and make it your own.

In the last article, I spoke about the ’6 steps to increase your speed of implementation for startups’. I centred that blog on retention and usability. This article will go even deeper into how to exercise those steps. How you need to think, implement and make things work. Your fundamental understanding of the subject has to be clear, or this article might be a bit too over your head. But that is ok, even if it is not completely clear, atleast you know what you are weak at. This way you can spend time mastering a particular subject.
  
Let’s get started!
Note: This is not a data-driven approach. This is when you have no traffic and you want to start from somewhere. Once you get traffic, you should try to optimise your design based on data and metrics. The principles in here will apply even to a data-driven approach, but data-driven is not the focus of this article. 

Here are the 8 steps to create any webpage you want.
1. Take time to research
2. Take time to organise the research
3. Choose the designs you like, mix and match
4. Structure your CSS and sass project
5. Build it!
6. Test it! 
7. A/B testing or multivariate testing 
8. Blog about it!


1. Take time to research
However great you are, there will always be people greater than you. Put your ego on the side and start learning from everyone. This is the 1st step to researching. This is how I do it. If I am going to create a blog website, I will try to look at the blogs I currently follow and choose the best design from it. For this article, we are going to copy Mark Mansons blog design. Do his blogs look great! yes? Would I like this blog to look like that? Why not? You should always be on the hunt for new information and capture anything that seems interesting. You never know when you will need it. For e.g. Let me go to a blog I recently came across. GrooveHQ. Reading through their articles, I found a link to an article on Neil Patel. Reading through, I found links to blogs that Neil follows. You should follow those links. Click to see what you do not know. Bookmark and return to it later. This is one way of researching on valuable content and great design. This method is my primary source of research. Following blog links. 
Other ways, use a search engine. Search for a topic you are interested in. If you click a link that looks amazing, then go ahead capture it. 
Another power way of researching is finding books on amazon. If you find a book you are interested in reading, trying doing a search on the author or the book. It should take you directly to a webpage related to that book. Since I am researching on blogs, I will go ahead and read blogs by that author to get a good idea of their writing style. 
Join forums like Warrior or whatever your interest is. Members of those forums will be able to refer you to great products or events. Those links are new information and you can keep track of it. 
Youtube is another great resource for finding new information. Click on the author of the video and see if they have a webpage. If they do, you can add that to your research.
While conducting the above research, I highly recommend you follow things you most likely will want to read and are interested in following. I don’t see myself following a beauty makeup website. Even if the design is appealing, I don’t think for my use case I would be designing a page like that.  I sure will capture it, but it won’t be my highest priority when organising my research. 

2. Take time to organise your research 
I use Toby to manage my bookmarks. We tend to bookmark a lot of sites. When it is time to retrieve what we bookmarked it often feels like this.


 On the other hand, Toby lets you organise your bookmarks more efficiently.  



Once you gather information, have a look at what parts of those webpages captures your interest. Keep track of it. Organise it physically as well as in your mind.
Use snagit to take screen capture. You can use any screen capture software; I prefer snagit.
I generally follow blogs on conversion, copywriting, sales, or anything funny like waitbutwhy, Iwillteachyoutoberich, etc. So it is a good idea to organise your new findings based on a particular category. 

3. Choose the design you like
After organising your research, for a particular project, choose the design you feel is most appropriate. For this blog post, I feel the Mark Manson’s blog would fit well. This is purely based on intuition and personal preference. Few things to keep in mind when selecting:

1. How long do you think it will take to copy the design? The more complicated it looks, the more time it will take
2. How likely will you be reusing this template again?  If you feel you can reuse it again, by all means, make it a higher priority. 
3. It does not have to be the best design. For e.g. iwillteachyoutoberich these articles have great designs. But I feel the time it would take to design it will be a bit too much for a blog like this. Maybe for some other article, where I feel that look will justify my writing I sure will copy that design. For this project perhaps not. 
4. Make sure it fits the flow of your website. Now, this can be tricky. Some design might not quite fit the flow of your website. That can be Ok, but generally, try to have a consistent look and feel across your website. To back the flow issue, we would need data. So for now, lets us not worry too much about it.

4. Structure your CSS and sass project
Now that you have done the research and chosen a webpage you want to swagger jack, let’s get started with designing and creating our workflow. The tools I use to setup my project:
Gulp
Sass
Susy
Breakpoint
Compass
Web-browser (Chrome, Firefox, IE)
Atom editor

I am not going to go into the details of how to install these packages. There are gazillion resources on these topics. 

1st, we need to organise our directory and structure of our files. Try to keep things modular so that it is easy to maintain and extend.  Since I use sass, you can follow this directory structure

Setting up Susy, follow Zeil. His books on learning Susy,  absolutely fantastic. Highly recommend you purchasing it if you want to learn responsive design. 

Use gulp to streamline your workflow. You do not have to use it, but I firmly believe in automating your work as much as you can and gulp can help you do that. To learn how to use gulp in a project, look into lynda.com.

This is my structure. 


_style.scss is for common css styles that will work for all layouts - mobile, tablet and desktop
_mixin.scss is for defining global scss functions that is used repeatedly.
_desktop.scss are of css styling that is only for desktop. 
Similarly, _mobile and _tablet are styles for mobile and tablet specific layouts 
_susydefaul.scss is to define global definitions like number of columns, etc

Resource to learn from:
Lynda.com - Building a Responsive Single-Page Design with Sass
Many of the Lynda.com tutorials are top notch. I enjoy Ray Villalobos teachings. (No, I am not an affiliate of Lynda.com)
You can browse through their CSS and HTML tutorials too. 
Learning Susy

The next section is very technical. If your foundation of CSS and basic web development is weak, go through the above resources. Understand how html and css works. It is imperative you understand the working as what we are going to do is hacking. Hacking is not something you can do without deep understanding of the subject.  Go pay your dues, as I am still paying mine :). 

5. Build it!!
Now let’s get started building. I have 4 screens, one for the page I want to copy, one screen for coding, the other screen to see my output and one for decoding websites. We will dive deep into how to do it. 

This is going to be your new best friend when it comes to copying web designs. The “view source code” and “inspect element”. Get used to the cryptic information. This is what the browser understand. What you see is a mere interpretation of that code. Let us get dirty with it. 


Before we get started let us create some few rules
1. Let's design for mobile then tablet and then desktop
2. We need to organise the number of columns. If this concept is new to you (if you have used bootstrap this should be familiar), highly recommend learning how responsive design works.

Let us see how marks website looks in mobile view. Let us start creating for mobile view. 


Define the number of columns you will be using. Susy has a great debug feature, allowing you to see your columns while you develop your styles. I have defined "9" columns for mobile. You can define any value that feels appropriate. It should not matter. 
 

Get the typography -  
Fonts
Font size
Font spacing
Line height 
H1, H2, H3, H4 tags.
Get the sections
Navigation panel
Body
Footer
The colors
Define all of these as global variables.    

To get the exact typography, font size and all the CSS styling; under "inspect element", right-click on any element of the page you will find all its' CSS properties.  
 

Which will bring you to this page. 



Every browser, be it chrome or firefox, will have web developer debug capabilities. For Firefox, I highly recommend using Firebug extension. This process of swagger jacking every element on the page for all 3 types of layouts mobile, tablet and desktop should be done. It can be a tedious process, but once you get the hang of it, you can do it pretty quickly. This is my end result. On the right is my version.      



The final result!! Can you guess? ..... Read till the end to get the answer. 

6. Test it!
Many developers including me, just do not test their code properly. A few manual tests and we publish our code. This, unfortunately, results in a lot of wastage; in terms of time and software developed. Not to mention that your code will not be robust and will probably break existing code. To prevent this from happening we will create test cases to test our template. This way when someone modifies it in the future, they should not break the existing template. 

The ability to test code even before software is written is essential. This is also called Extreme Programming.

This step might seem a bit advanced. And it is. We use a MVC (Model View Controller) called php-phalcon. I need to now plug this template into my main application and test it. You can do the same for wordpress. I will be using codeception, phpunit and selenium for my testing. Our goal is to make our code robust and minimise waste in the future. 
We will not be testing any javascript code. We rather will test the whole application as a whole in our Acceptance test. You can, and probably should write test cases for javascript code too. I will do that sometime in the future. For this article, all my tests will be done in PHP. 

There are 3 levels of testing. 
a. Unit testing
Test every piece of code and make sure the software is robust enough.
b. Acceptance test
Make a set of rules that you want your template to have. Make sure when you test the template all those rules are applied. 
c. Functional test
Testing the application as a whole. This is to make sure the whole application is working. The code developed does not break the application. 

Below are the test cases you need to first write. You can brainstorm what core features your template needs to have. These tests that we are developing is applicable for all templates you create. Once you write a test case, you should not have to change it that often. Only the unit test for that template needs to be written. 

Functional test for template design: Codeception
1. Check if the meta-data is populated for:
a. Facebook
b. Twitter
c.     Tittle, description and picture
2. Check if there is rss feed
3. Check if there is a heading picture
4. Check if there is an author content
5. Check if there is comment section
6. Check if there is a subscribe section
7. Check if there is the logo
8. Check if all the tabs are populated
9. Check if there is a share button
10. Check if there is author or written by placeholder
11. Check if there the footer has all the necessary information
a. Facebook page
b. LinkedIn page
c. Twitter page
d. Pinterest page 
e. Google plus page
f. Flipboard page
12. Check the page has template name and version
13. Check if it has audio playback

Acceptance test using selenium:
Step1:
1. Login into antsand editor
2. Write an article
3. Make sure the blog and template is selected
4. Upload photos
5. Youtube video
6. Audio files
7. Pictures
8.
Step 2:
1. Go to corresponding blog and check if all the information is populated properly
a. Mobile view
b. Tablet view
c. Desktop view
2. Check article is the same
3. Check images
4. Check audio file
5. Check heading pic

Unit testing:
1. Test if the controller and if it routes to the right template
2. Test if the view has all the right parameters populated
3. Test model to see if all the parameters in the database are correct 

Run your tests and make sure there are no errors. I still have to complete all my testcases. I have just completed the Functional test. Still working on the Acceptance test.


7. A/B Testing or multivariate testing 
Now it is time to setup your application for A/B testing. There are many tools out there like unbounce but in our use case, we will be configuring our server to do a/b testing manually. This way if you want to test which page is performing better, you can do it with ease. We run using the Nginx servers. For NGINX read this document. It is self-explanatory. 
  
8. Blog about it
It is good to document every step of how you are doing what you are doing.  
a. It helps you to reinforce your learning
b. It helps you to keep track of what you did. Next time in the future you want to do something, it won’t be too vague
c. You can share your progress with other people and they can give you feedback. 

This has been an exhaustive blog. It has a lot of information and may require a bit of pre-requisite understanding of how to put all the piece together. Even if you do not fully understand what I have done it is ok. Your job is to look at what you don’t understand completely, go read a book or download an online course related to that subject matter and practice till you understand all the concepts. For e.g. you may not know exactly how CSS works with HTML. Go master it. Or you may not know how sass works or how susy works. Go master it. Each one of these tools are building blocks for creating stunning web-pages. 

Sure, you can get this done by downloading a template. Many do, and many make a lot of money doing it. Unfortunately, it does not last. Learn things from a perspective that will last for years to come. 

Tell me about the webpage you like and want to copy. I would love to hear what you have learnt. Over time your design intuition will improve. If you found this article useful please share it and if you have any questions, please comment below. I will be happy to clarify any question.   

Answer to the above question: This blog your reading is the result.

1 Comments

Anthony
Mar 13, 2018 External
Steve jobs once said:

Steve Jobs: “We have always been shameless about stealing great ideas” This is an oldie but still fascinating to watch if you haven't seen it. Steve Jobs spinning off from Picasso's quote “Good artists copy, great artists steal” he continues, “We have always been shameless about stealing great ideas.”

https://www.youtube.com/watch?v=CW0DUg63lqU

Leave a Reply

Make sure you fill in all mandatory fields.Required fields are marked *