Designer & Custom Design vs Design System vs Ready Made Template
Whether you’re designing a web or mobile app, an e-shop or a website, there’s always the same question. Should I pick a ready-made template/theme or get the designer to draw me a custom solution that fits my needs? And then there’s the third option: use some design system or UI library.
Let’s compare and for the comparison, we’re going to imagine that we need an app or website that has 5 different views. The first main page opening view has twice as many components as the four following so we could say 6 different simple views.
Designer
Pros:
- The most beautiful UI end result.
- The best custom fit for your content.
- Clean modern code.
Cons:
- Most expensive. The designer will need 3h per every 6 views + the front-end developer will need 4h per every 6 views. Total: 42h.
- If you let the designer create something really different from a typical modern solution then you can expect maybe up to 8h front-end designer hours + if you will need to manage the content yourself then you may expect double the hassle for yourself to manage the content in the way that this super-fancy UI design remains like that.
Examples:
- Some examples by CrewNew’s designer Josh: behance.net/crewnew
- Let your inspiration fly by browsing the tons of award-winning designs at awwwards.com
Pick this option if you’re selling high-end products and you need to give the best first impression to your users. The best-looking UI is important and the extra budget brings you value.
Design Systems / UI Libraries / Toolkits
Pros:
- Around 2x cheaper. No designer at all and the front-end developer will need 3–4h per view. Total: 21h.
- You have tons of components ready to be used immediately and it is super cheap.
- Clean modern code.
Cons:
- Rather minimalist UI design. Modern and good looking but for sure not anything fancy nor unique.
- Gives you rather components ready-made, not the whole template or ready-made views for your specific needs
Examples:
- Skeleton.dev — from the top right menu please, take “Theme” and switch between different themes or pick the last item “Theme Generator” and enter your logo’s colors if you have one.
- Flowbite.com — this is for example a blog template but there are also tons of components that are easy and cheap to use.
- Tailwindtoolbox.com — tons of more UI kits and building tools
- DaisyUI — Tailwind CSS with fewer code
Pick this option if you don’t need to have that super unique look and feel and/or if your budget is lower. It will give you tons of components so you can build anytime anything new in your app pretty cheaply.
Ready-made templates
Pros:
- If you’re lucky and after spending some hours on finding the right template then you may have a (near) as good solution as the “Designer” option but around 2.5x cheaper
Cons:
- If you’re not lucky you may just spend some hours searching and playing around and then still go with one of the above options
- If you don’t find the template that (almost) exactly matches your needs then making too many changes to the ready-made solution will make it not that good looking anymore.
- Many templates are built years ago and use old technologies like Bootstrap and jQuery so it may take quite a few hours to convert them into the latest technologies. Searching with the keyword “Tailwind” will give you fewer results but you can be more sure that you get the latest modern codebase that will give you multiple advantages (better cost in development, cheaper to make changes, better SEO, and more).
- Code quality is unknown on paid templates before you buy. Bad code quality means expensive to make changes or add new stuff.
Examples:
- TailwindUI Templates — Made by Tailwind makers
- Creative Tim — App admin panel and landing page template. Creative Tim has more templates and his code is always high quality. Another example from Tim.
- Techwind Themes — all modern latest codebase
- Monst — website template example
- Plurk — website template example 2
- Toggy — website template example 3
- LandWind — Click “Details” and “Visit this unsafe website” as it is actually very safe to visit and just missing SSL certificates.
- Themeforest — thousands of templates in the biggest marketplace
- Accommodation Rental Template in the picture
- And the list can go on and on and on and on…
Pick this option if your budget is low but you still want to look as fancy as possible. And if you and you are willing to spend time on searching for ready-made templates. You must be ready to take risks and end up wasting your time and not finding the right template.
