November 2026 update. I still use the design steps below, but I now ask a second question: can the next site reuse the decision without looking identical? In Antsand, a page is assembled from sections with explicit header, body, and footer responsibilities. Type, spacing, color, and responsive rules belong in shared styles; the words, assets, and order belong to the site. That makes a design system useful to a small team rather than just a collection of attractive screenshots.
My current review starts with a real page at desktop and mobile widths. I check reading order, keyboard focus, contrast, form errors, and whether a component survives different content lengths. A visually consistent component that hides the action from a keyboard user is not finished. Read this older guide for the visual process, then use those checks when you turn the result into a reusable page section.
Have you ever started a UI project and found yourself struggling to come up with a good design?
Or have you mixed and matched ideas by instinct, only to find that the result feels mediocre?
Are you a web-designer or web-developer and want to learn UI and web design in the most effective way possible?
I did not start out as a web designer; circumstances pushed me to learn the craft. I am still learning to see what makes a design work, but I can show you the process I use to get there. 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. By the end, you should have a way to study a page you admire, understand its decisions, and build something that fits your own site. Learn from the layout; do not copy someone else's branding or assets.
In the last article, I spoke about the steps to increase your speed of implementation for startups. I centered that blog on retention and usability. Here I go deeper into what those steps look like in practice: how I think through a page, build it, and test whether it works. Some CSS and browser basics will help. If a step feels unfamiliar, treat that as a place to pause and learn, not a reason to stop. 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 have readers, observe what they can actually use and where they struggle; traffic numbers alone will not tell you why a design works. 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 eight steps I used to turn a design reference into a working page.
1.Take time to research
2.Take time to organize 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 good you are, someone else has solved a problem you have not. Put your ego aside and learn from their work. That is where my research starts. 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, I studied Mark Manson's blog. I liked its reading flow and wanted to understand why it worked. The goal was to learn from its structure, not reproduce its identity. 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 organizing my research.
2.Take time to org anise your research
I use Toby to manage my bookmarks. We tend to bookmark a lot of sites.
On the other hand, Toby lets you organize your bookmarks more efficiently.
Once you gather information, have a look at what parts of those webpages captures your interest. Keep track of it. Organize 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 org anise your new findings based on a particular category.
3.Choose the design you like
After organizing 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. These were the tools I used when I built this page. Treat the list as a snapshot of that workflow, not a current setup guide:
Web browser (Chrome, Firefox, and Internet Explorer at the time)
I am not going to go into the details of how to install these packages. There are gazillion resources on these topics.
First, we need to organize our directories and 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 the Sass structure I used for this project. The principle I would keep is separating shared rules from page-specific rules; I would not require a new project to use these exact tools or filenames.
_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.
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. View Source and Inspect Element. Get used to reading the HTML and CSS beneath the page. 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 organize 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.
Define all of these as global variables.
Which will bring you to this page.
Chrome and Firefox have built-in developer tools. The Firebug extension I used when writing this article has since been retired; use the browser Inspector today. Study the page at mobile, tablet, and desktop widths, then make decisions that suit your own content. 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.
Writing useful checks before or while building can expose a weak design early. Test-driven development is one practice within Extreme Programming, not another name for the whole method.
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.
In this original example I focused on PHP and whole-page acceptance checks; I did not add separate JavaScript tests. That is a gap in the example, not advice to leave interactive code untested. Today I would check keyboard behavior and browser interactions too.
There are 3 levels of testing.
a.Unit testing
Test small units and their behavior in isolation. Unit tests do not, by themselves, prove the whole page works.
b.Acceptance test
Describe what a reader should be able to do, then check the delivered page against those expectations.
c.Functional test
Test the application paths that connect the template to its controllers, data, and assets. A passing unit test cannot establish those connections.
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.Social links that this site actually maintains (Google+ has closed)
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. At the time I wrote this, I had only completed the functional checks. The acceptance checks were still a plan, not a passing test suite.
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: The page you are reading grew out of that exercise.
Conclusion:
If you have questions or have tried one of these steps, tell me what happened. At ANTSAND, I try to show the work, including where the first version fell short. The screenshots and tool choices here are from an older build; the research, implementation, and testing loop is what I still use.
The old $5 monthly marketing-package invitation was an idea at the time, not a current offer. If this design process helps, tell me what you built and where the page still fails for a real reader.
If you want to read other blogs that might interest you, have a look below.
More Stuff from ANTSAND
Business, UI and UX:
Marketing Made Easy. Ultimate guide to making your business more marketable and profitable
Speed of Implementation for UI and UX startups
8 steps to create world class UI and UX for your startup
12 mindsets and behaviors required for running a lean startup
12 ways to maintain your website and increase sales
My mental maps for success:
39+ mental tools I use to make better decisions
If you are a programmer, you can read more on our Programming blogs:
How to integrate php and vue.js components
Integrating, php, vue and webpack with code examples
Creating restful API's using php and vue
Life style:
13 things I learnt after doing the 10 week wim-hof method