How to get UI (Layout and Style) for your project – since weekend projects probably don’t have dedicated designers. How to get to market faster, without huge upfront investment?
For the sake of simplicity (and because I am familiar with it), I will use WordPress as a sample for the editor. But in reality, it can be any CMS.
WordPress will be used as Editor only (it will not be used for hosting).
- Create a Page in WordPress with Fake / Mock Data
- Add all elements your screen should have:
List (fill in with fake data),
Table (fill in with fake data),
Static Images instead of iFrame,
Buttons that do nothing but look good ,
- Once the page content is ready,
choose a Theme you are happy with
- Do the preview, and be happy how your V1 page looks like – without having a dedicated designer
Export to Static HTML
Once the page (with fake data) is ready, let’s export it to a static HTML page.
Many options out there:
Add App Logic
Now that you have static HTML, CSS, Images etc on your filesystem, we will use it as a starting point. Let’s make a project out of it.
Hook up Buttons. Add brain behind the looks
You should now have your app fully functional, and looking good (on both desktop and mobile) – without writing a single line of CSS. Which is great, at least for me – since i don’t know how to write beautiful CSS .
You can now publish it, and if all went good, you app will be ready with the looks, in matter of days – not weeks/months.
But, with all that bad stuff – what good that you actually have is: Great Starting Point!
You got nice looking MVP, on which you can now iterate, show to people, get feedback and improve.
Add TypeScript to the project, and write App logic in a type-checking language from this point onward .
2. Add React for the Dynamic Components
Change your app logic to use React (with ReSub) for the components that you touched. Leave static HTML (all the rest) as is.
note: while doing this, you actually have fully functional service running. MVP is always there, usable. You don’t need to wait 2 months till you learn React to have the service up and running. This is just part of Iterate and Improve cycle.
3. Add more React for Standard Components
After your app logic has been Reactified – you can now start to migrate parts of your page (plain HTML) into reusable components. Stuff like: Header, Footer etc.
This work is never done because your service will live, and you will be adding more features – but by this point, you actually had opportunity to add features cause the base is there.