UI design

jsmoke · 14 Feb 2019 at 08:10

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.

Rroff · 14 Feb 2019 at 08:15

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.

jsmoke · 14 Feb 2019 at 08:19

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.

Deleted member 77746 · 14 Feb 2019 at 09:42

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.

Hawk Tuah · 14 Feb 2019 at 09:56

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.

chroniclard · 14 Feb 2019 at 10:18

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.

Rroff · 14 Feb 2019 at 10:33

jsmoke said:
Image sells.

Image sells, functionality is what keeps people coming back.

jsmoke · 14 Feb 2019 at 13:32

How about fonts, what's the secret behind choosing the best font to fit the theme, is this just experience and an artistic feel?

Rroff · 14 Feb 2019 at 13:36

Ultimately it comes down to trying a few and seeing what feels right.

reflux · 14 Feb 2019 at 13:41

jsmoke said:
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.

Deleted member 77746 · 14 Feb 2019 at 19:23

Rroff said:
Image sells, functionality is what keeps people coming back.

Just ask OcUK

Randomface74 · 14 Feb 2019 at 19:28

Layout: Find a quiet place, get some squared math paper, and draw it with a pencil. Usability is king.
Imagery: Take a photo and crop bits from it. Pipette yourself a colour palette from it.
Fonts: websafe https://www.w3schools.com/cssref/css_websafe_fonts.asp

UberTiger · 14 Feb 2019 at 19:30

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.