UI design

Soldato
Joined
17 Jun 2012
Posts
11,259
Not sure if I'm unskilled at UI design or just not interested in it.

So I have to design a few pages worth, buttons, labels, lists, menus, checkboxes, colours, sizes, positioning, fonts, graphics, and more.

How do you go about doing it, do you look at other apps/webpages etc?

Must be having artists block.
 
There is no one answer to that - huge topic in its own right.

Generally though group controls and features with like so that the design is more intuitive to follow, keep consistency as to where things like navigation buttons are placed and how they operate and the same for other actions.
 
I get what your saying it's a whole topic in its self, definitely something that some training would help with. Multimedia degree or HNC or something.

It's like the difference between the text webpages of the 90s vs the web 2.0 pages of the now. Same functionality but looks pretty slick. Image sells.
 
Sometimes when it comes to design some people can do it some can't. As much as I try to understand design I just can't get my head around it. It's a creative thing. I'm OK at doing websites as long as it's a pre-template that you can edit. I understand coding but not design.
 
I find this useful for sticking some ideas together - especially when you want to show something to a client quickly.

https://www.mockplus.com/

Then, you'll probably end up using some form of open source UI in the design - like JQuery UI, Boostrap etc. So they'll be your base - and you then add your own touches on top.
 
Get "insert ui framework of choice here", theme it, done.

We get a graphic designer in usually when we need a custom design as we are more focused on functionality/code. Im useless at the design side.
 
How about fonts, what's the secret behind choosing the best font to fit the theme, is this just experience and an artistic feel?
 
How about fonts, what's the secret behind choosing the best font to fit the theme, is this just experience and an artistic feel?

As Rroff says, you've gotta try some and see what feels right. You're basically going to be limited to 'web-safe' fonts unless you want to use Google Fonts or a commercial font-hosting service.

Google Fonts recommends pairings for fonts, which is quite useful. You can use one font for headings and another for body copy for example.
 
Dribble is always good for a bit of inspiration.

Sketch App, Adobe XD or Figma are good for mockups these days. Sketch is much more feature rich than XD at the moment. I've heard really good things about Figma, although not tried it, and it even has a free plan to get started.

There's tons of great fonts available these days, most have a web version you can self host now. Picking some great headline fonts can have a massive impact on the design.

If you have and Adobe subscription you can use all the ones at fonts.adobe.com and add them with a single line of code. They're only good while you subscription is valid though.
 
Back
Top Bottom