create account

Fundamentals of UI design... as told by a non-designer by hendrikcrause

View this thread on: hive.blogpeakd.comecency.com
· @hendrikcrause · (edited)
$87.14
Fundamentals of UI design... as told by a non-designer
In [my last post](https://steemit.com/programming/@hendrikcrause/i-love-working-with-react-so-why-am-i-switching-to-angular-part-3) I mentioned that I will be working on a sort of web resume app built in [Angular](https://angular.io). But before I can actually do any coding, I have to decide what the gosh darn thing is gonna look like. So I thought I'd share some of the principles I try to use - emphasis on try - when working out the design of a new project.

<center>
![web-design-2038872_640.jpg](https://steemitimages.com/DQmUVHcWiAM4QTHYUmC6fNKm2Pf9M6k1MJYP2QVqEJ4keti/web-design-2038872_640.jpg)
Image courtesy of [Pixabay](https://pixabay.com)</center> 

### First a caveat
I am not a designer by any definition of the term. Nor do plan to ever become one. I believe that I am able to put together interfaces that at least look descent, not great, won't win any awards, but good enough to at least make you think "This app could have been made by a professional". And to be honest that's good enough for me at this stage. To illustrate I'll add screenshots of two of my previous apps:

<center>
![crossword creator screenshot](https://steemitimages.com/DQmSEBTDw43QtxyM79rMko6U9iMkFTefMTgGbgi3BHKcMLn/Screen%20Shot%202017-09-07%20at%207.07.59%20PM.png)
A crossword generating app: [Crossword Creator](http://crossword-creator.netlify.com/)
</center>

<center>
![creator draw screenshot](https://raw.githubusercontent.com/HendrikCrause/creator-draw/master/wp/gallery/screenshot.png)
A drawing app: [github page](https://github.com/HendrikCrause/creator-draw), sorry it's not hosted.
</center>

Now that that's out of the way, let's begin shall we.

### 1. Plan ahead...
...or at least try to think ahead. You have to try to imagine how a user is going to use your app and what information is going to be displayed. Split it up into different sections or pages to make it a little easier to digest. Once you at least have some idea what it should do, deciding what it should look like becomes a little bit easier. 

And even if you have a vague image in your head, it's still a good idea to plan at some level beforehand - because tomorrow you're going to forget that grandiose picture.

### 2. Keep it consistent
Nothing screams amateur like a site with different fonts and colors on every single page. Or worse still... on the same page! Decide on a style and stick to it - unless you have a really, really good reason not to - if this happens to be the case for you, you're probably not going to learn much of anything from this post.

### 3. Not too much, not too little
Another instant [ipecac](https://en.wikipedia.org/wiki/Syrup_of_ipecac) like trigger for an app is when there are just so many things going on... Of course it may not always be obvious that your app has become a candidate to star on [Hoarders](http://www.imdb.com/title/tt1497563/)

<center>
![busy website](https://blog.optimizely.com/wp-content/uploads/2014/06/busy-landing-page-1024x554.png)
[Image source](https://blog.optimizely.com/2014/06/18/how-my-startup-achieved-huge-business-growth-by-ab-testing/)
</center>

On the other hand, if your users are just going to stare at a giant white block most of the time, they're not going to stay users for very long. Looking at an almost blank page is boring. Too be honest, I think I tend to make my projects a little too sparse too.

The best way I can think of to try get a gauge of how balanced your content is, ask a friend to give you their first impressions and adjust as needed. Which brings me to my final point for this post...

### 4. Take all the help you can get
This can take many forms:
* Asking for someone's opinion on your initial draft - if that person is a designer even better.
* Reading up on good practices - as a side note, while researching for this article I came across a pretty well thought out slideshare you can find [here](https://www.slideshare.net/merlinrebrovic/fundamentals-of-user-interface-design-55970437) that you can use as a starting point.
* Use a design library or framework - except [Bootstrap](http://getbootstrap.com/) because every developer and their grandma uses it and frankly it's getting annoying. A good library will very likely have people that do design for a living working on it. The most popular route to go these days is [Material Design](https://material.io/guidelines/) - although that will probably become the next Bootstrap.

I think that about covers the extent of what I think I know about design. If you happen to be an actual designer that made it this far, hats off to you firstly and secondly I'd love to hear what you thought/know I got wrong. Leave a comment below.
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 19 others
properties (23)
authorhendrikcrause
permlinkfundamentals-of-ui-design-as-told-by-a-non-designer
categorydesign
json_metadata{"tags":["design","programming","knowledge","technology","tutorial"],"image":["https://steemitimages.com/DQmUVHcWiAM4QTHYUmC6fNKm2Pf9M6k1MJYP2QVqEJ4keti/web-design-2038872_640.jpg","https://steemitimages.com/DQmSEBTDw43QtxyM79rMko6U9iMkFTefMTgGbgi3BHKcMLn/Screen%20Shot%202017-09-07%20at%207.07.59%20PM.png","https://raw.githubusercontent.com/HendrikCrause/creator-draw/master/wp/gallery/screenshot.png","https://blog.optimizely.com/wp-content/uploads/2014/06/busy-landing-page-1024x554.png"],"links":["https://steemit.com/programming/@hendrikcrause/i-love-working-with-react-so-why-am-i-switching-to-angular-part-3","https://angular.io","https://pixabay.com","http://crossword-creator.netlify.com/","https://github.com/HendrikCrause/creator-draw","https://en.wikipedia.org/wiki/Syrup_of_ipecac","http://www.imdb.com/title/tt1497563/","https://blog.optimizely.com/2014/06/18/how-my-startup-achieved-huge-business-growth-by-ab-testing/","https://www.slideshare.net/merlinrebrovic/fundamentals-of-user-interface-design-55970437","http://getbootstrap.com/","https://material.io/guidelines/"],"app":"steemit/0.1","format":"markdown"}
created2017-09-07 19:27:30
last_update2017-09-08 10:02:15
depth0
children9
last_payout2017-09-14 19:27:30
cashout_time1969-12-31 23:59:59
total_payout_value69.472 HBD
curator_payout_value17.666 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,668
author_reputation1,510,925,846,074
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,182,654
net_rshares28,140,987,048,344
author_curate_reward""
vote details (83)
@dsantrat ·
$0.07
From a software dev who went to school for graphic design,  this is pretty spot on. I'd tack onto that plan ahead, that making paper prototypes, even lo-fi ones, help that step quite a bit. You get a better understanding and even at that point, you could have people test it out by asking them what they would do to try to do X Y or Z on your app or site even though it's on paper. It's helped me a lot with past projects. This is if you have the time to do this anyway *
👍  ,
properties (23)
authordsantrat
permlinkre-hendrikcrause-fundamentals-of-ui-design-as-told-by-a-non-designer-20170914t134251155z
categorydesign
json_metadata{"tags":["design"],"app":"steemit/0.1"}
created2017-09-14 13:42:51
last_update2017-09-14 13:42:51
depth1
children1
last_payout2017-09-21 13:42:51
cashout_time1969-12-31 23:59:59
total_payout_value0.059 HBD
curator_payout_value0.010 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length471
author_reputation10,631,942,971
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,864,674
net_rshares24,817,988,507
author_curate_reward""
vote details (2)
@hendrikcrause ·
It's seems as though the low-tech solutions always give the best results.
Thanks for the pro-tip.
properties (22)
authorhendrikcrause
permlinkre-dsantrat-re-hendrikcrause-fundamentals-of-ui-design-as-told-by-a-non-designer-20170914t135852535z
categorydesign
json_metadata{"tags":["design"],"app":"steemit/0.1"}
created2017-09-14 13:58:51
last_update2017-09-14 13:58:51
depth2
children0
last_payout2017-09-21 13:58:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length97
author_reputation1,510,925,846,074
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,866,092
net_rshares0
@phil-coding ·
This is really good post and I love the photography in the start of the post
👍  
properties (23)
authorphil-coding
permlinkre-hendrikcrause-fundamentals-of-ui-design-as-told-by-a-non-designer-20170908t065140967z
categorydesign
json_metadata{"tags":["design"],"app":"steemit/0.1"}
created2017-09-08 06:53:18
last_update2017-09-08 06:53:18
depth1
children1
last_payout2017-09-15 06:53:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length76
author_reputation4,773,758,818
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,224,493
net_rshares6,555,305,693
author_curate_reward""
vote details (1)
@hendrikcrause ·
Thank you
properties (22)
authorhendrikcrause
permlinkre-phil-coding-re-hendrikcrause-fundamentals-of-ui-design-as-told-by-a-non-designer-20170908t085754279z
categorydesign
json_metadata{"tags":["design"],"app":"steemit/0.1"}
created2017-09-08 08:57:54
last_update2017-09-08 08:57:54
depth2
children0
last_payout2017-09-15 08:57:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9
author_reputation1,510,925,846,074
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,232,663
net_rshares0
@pilcrow ·
Heh, say what you want about Ling's Cars but their design is very intentional and it seems to be working quite well :)

http://www.independent.co.uk/life-style/gadgets-and-tech/ling-s-cars-has-one-of-the-best-websites-on-the-internet-a7492386.html
properties (22)
authorpilcrow
permlinkre-hendrikcrause-201797t214525189z
categorydesign
json_metadata{"tags":"design","app":"esteem/1.4.6","format":"markdown+html","community":"esteem"}
created2017-09-07 19:45:27
last_update2017-09-07 19:45:27
depth1
children1
last_payout2017-09-14 19:45:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length247
author_reputation2,531,070,549,481
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries
0.
accountesteemapp
weight500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,183,930
net_rshares0
@hendrikcrause ·
$0.07
There's this thing that is always mentioned whenever you read about design guidelines. That is that every rule can be broken, if you have a good reason to do so. I think that might be why modern art is a thing by the way.

In the case of Ling's Cars I think the intention was to be so bad that everyone that ever wants an example of what not to do when designing a website can just use it as a reference. For that it works very well.
👍  
properties (23)
authorhendrikcrause
permlinkre-pilcrow-re-hendrikcrause-201797t214525189z-20170908t093511240z
categorydesign
json_metadata{"tags":["design"],"app":"steemit/0.1"}
created2017-09-08 09:35:15
last_update2017-09-08 09:35:15
depth2
children0
last_payout2017-09-15 09:35:15
cashout_time1969-12-31 23:59:59
total_payout_value0.052 HBD
curator_payout_value0.016 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length433
author_reputation1,510,925,846,074
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,235,217
net_rshares23,572,104,574
author_curate_reward""
vote details (1)
@protoken ·
Material design is the framework developed by Google, right? What's the difference between between that and bootstrap?
👍  
properties (23)
authorprotoken
permlinkre-hendrikcrause-fundamentals-of-ui-design-as-told-by-a-non-designer-20170907t211337242z
categorydesign
json_metadata{"tags":["design"],"app":"steemit/0.1"}
created2017-09-07 21:13:36
last_update2017-09-07 21:13:36
depth1
children2
last_payout2017-09-14 21:13:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length118
author_reputation437,826,777,290
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,190,221
net_rshares5,890,503,089
author_curate_reward""
vote details (1)
@hendrikcrause ·
Yes, Material Design was developed and is used by Google.
Material Design isn't really a framework as much as it is a set of very strict design guidelines which in turn is used by independent developers to create libraries for you to use in your own projects. You can look at [Material UI](http://www.material-ui.com) which was developed by [Call-em-all](https://www.call-em-all.com/) to be a Material Design library for React. Then there's [Angular Material](https://material.angular.io/) which was developed by Google's Angular team. There's also many other pure css implementations you can use - see [Material Design Lite](https://getmdl.io/) and [Materialize](http://materializecss.com/). If you're brave you can even develop your own library that use the Material Design guidelines.

Bootstrap was developed by Twitter many years ago and is a full blown UI framework. Many people have made their own customised versions of Bootstrap as well. There's even a few Bootstrap based libraries that use Material Design - see [Material Design for Bootstrap 4](https://mdbootstrap.com/).

I should have probably been a bit clearer when I suggested you don't use Bootstrap. I should have probably said don't use Bootstrap as-is. Either use a customised version or customise it yourself so that at least your app doesn't look like all the other apps out there - and essentially gets lost in the masses. If you do that then Bootstrap can still be a very good choice.
👍  
properties (23)
authorhendrikcrause
permlinkre-protoken-re-hendrikcrause-fundamentals-of-ui-design-as-told-by-a-non-designer-20170908t092657647z
categorydesign
json_metadata{"tags":["design"],"links":["http://www.material-ui.com","https://www.call-em-all.com/","https://material.angular.io/","https://getmdl.io/","http://materializecss.com/","https://mdbootstrap.com/"],"app":"steemit/0.1"}
created2017-09-08 09:27:00
last_update2017-09-08 09:27:00
depth2
children1
last_payout2017-09-15 09:27:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,459
author_reputation1,510,925,846,074
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,234,631
net_rshares1,137,399,724
author_curate_reward""
vote details (1)
@protoken ·
Thanks for the info.
👍  
properties (23)
authorprotoken
permlinkre-hendrikcrause-re-protoken-re-hendrikcrause-fundamentals-of-ui-design-as-told-by-a-non-designer-20170908t162805863z
categorydesign
json_metadata{"tags":["design"],"app":"steemit/0.1"}
created2017-09-08 16:28:09
last_update2017-09-08 16:28:09
depth3
children0
last_payout2017-09-15 16:28:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length20
author_reputation437,826,777,290
root_title"Fundamentals of UI design... as told by a non-designer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id14,271,578
net_rshares6,679,773,523
author_curate_reward""
vote details (1)