41–50 of 59 posts
Also, feel free to steal design ideas. If your projects ever get off the ground, part of the reason will be that they are familiar enough to customers to use without a headache.
I'll use one of my recent projects as an example. Here's the first version of the landing page : https://imgur.com/a/BDNgl and here's the current landing page : https://www.hostedcomments.com/
Even though the current version could be improved significantly, I graduated from receiving comments such as "The current one doesn't motivate me to continue, even less to buy from you" to being somewhat acceptable.
Here's what works for me : I used bootstrap but tweaked the colours of the default buttons, the colour of the navbar and footer and it made a world of difference. The default bootstrap colour scheme is pretty ordinary and the examples feel like they are literally designed to expose people like me, who just use the default bootstrap colour scheme and example code snippets and end up with a terrible design. As an example, the default navbar has rounded corners and a simple addition of the navbar-static-top class makes the navbar look significantly better.
Regarding UX, keep things as straightforward as possible. Cut out all the bullshit and fluff to deliver a flow that's natural to new users. You will need to talk to users to figure out what works and what doesn't. It's also a good idea to have helpful tooltips in areas where users can potentially have trouble understanding the flow.
In general use screenshots/gifs/videos liberally, especially on the landing page. They work pretty well.
I'm going to take a different angle: Don't build a GUI if you don't have the skills to build a GUI. You won't be able to compete on features in the long run, and you certainly won't be able to compete on design in the short run. And certainly not without devoting 100% of your time towards it. Instead realize that there are three primary types of interfaces that are in wide use today: GUI, API, and CLI. If you're a ba…
. Look for a friend/partner who does UX.
. Contract external freelancer or business to design for you.
I’ve done the above before for my projects. The trick is to keep your design requests very simple and reference existing websites as an example. Also hire someone who is in a similar time zone to you.
If the project works & start making money you can go find someone who is more expensive to make it look nicer. Design is an iterative process.
For some perspective: take a few sites that you use every day (e.g. Google, possibly Facebook, any news site that you visit regularly) and check on First Versions ( http://www.firstversions.com/ ) to see what their first publicly available iterations look like. If that doesn't lower your bar for visual design, nothing will :) Remember also that many "minimalist" / "undesigned" sites (e.g. Craigslist) are quite popula…
I learned basic css, jQuery, and Bootstrap CSS. This let me get my ideas out there. Then if I feel it is worth improving, I would hire someone off Upwork and Fiverr. Usually, it is a lot easier to work with frontend developer when they can see a functioning website. Also it seems to be a lot cheaper than starting with idea on paper.
Although, I am working hard to learn more and more frontend dev, so my cost will be lower.
It took me a while but I can put together a decent site using the following tools:
- Sketch (https://www.sketchapp.com/)
- Font Pair (http://fontpair.co/)
- Paletton (http://paletton.com/)
- Unsplash (https://unsplash.com/)
- UI Gradients (https://uigradients.com/)
- Flat Icon (https://www.flaticon.com/)
I use Tachyons to limit the number of CSS choices I need to make. It works for 95% of styles and looks great. I only need to add custom classes or inline styles for special cases such as gradients, background images, transitions.
- Tachyons (http://tachyons.io/docs/)
When I design something the goal is to define components and re-use them. I usually steal components from existing projects.
- Shopify Polaris Components (https://polaris.shopify.com/components/get-started#navigatio...)
- Bootstrap Components (https://getbootstrap.com/)
- Material Components (https://material.io/components/)
- Metro UI Widgets (https://metroui.org.ua/)
Website design comes from understanding what the user wants to do and selecting components that solve the problem. I usually create a new artboard in Sketch for each purpose. For example LandingPage, PricingPage, SignInPage, SignUpPage, ResetPasswordPage, ThankYouForConfirmingEmailPage, UserSettingsPage, etc.
You should create a mobile artboard, tablet artboard, and desktop artboard for each page. You can add variants for error states, etc.
I start with the mobile artboard and add components until I accomplish the purpose. I then adapt the mobile design to tablet and desktop.
If the user needs to enter information I add a Form with a Heading, a number of Inputs with Labels, and a submit Button. If the user wants to view data I need to add a Heading, a Chart or Table, etc. If there is a lot of negative space, I find an image or commission a drawing to fill the space.
If I can't decide how it should look, I search online for inspiration. Google "login forms ui" or see how successful companies solve the problem. Adapt what they do to use my existing components, space it out so it doesn't look offensive, and I'm done.