Create Nice Looking UI for Your Weekend Project

Problem Statement

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?

WYSWYG Editor

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:
    Title, texts,
    List (fill in with fake data),
    Table (fill in with fake data),
    Static Images instead of iFrame,
    Buttons that do nothing but look good 🙂,
    etc
  • 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:
https://blog.resellerclub.com/how-to-convert-wordpress-site-to-html/
https://hostadvice.com/how-to/how-to-convert-a-wordpress-site-to-a-static-html-website/

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.

Import it to Visual Studio Code. Create new JavaScript file. Implement your application logic for fetching the data from the server – replacing only the elements that were containing fake data: User Name, Lists…
Hook up Buttons. Add brain behind the looks 🙂

Publish

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.


Next Steps

Now you have V1 that looks good – but code is not designed nicely, it’s a pile of mud. Mix of plain JavaScript 🤦‍♀️ and machine generated HTML – that no one wants to maintain 🙂.

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.

So, first step would be to get rid of JavaScript 🙂.

1. Get Rid of JavaScript

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.

Leave a Reply

Your email address will not be published. Required fields are marked *