top of page

feeling my way around app design - 2 - playing with neon theming

Updated: Mar 29, 2023






Let's start as we mean to go on… I need relaxed, no pressure but productive – lets go for YouTube Lofi hip hop radio.


In the last session while looking across flaticon.com and across google images of retro gaming aesthetic, I was drawn to the ‘level up’ images. Replace the ‘level’ with ‘tidy’… there we go… Tidy up! Bam! Let's give that a go..


I have a small graphics tablet and on the design page of Figma (where I created the frames on the last blog) I draw out a level up design of my own inspired by what I had seen and then made it into a Neon sign with the help of a tutorial I found on Youtube by Анастасия Ермолаева. This explains the process the following way –

  • You take your icon and centre it on a square frame.

  • Make the frame black and your icon white.

  • Select your icon and down the right-hand side you will see effects

  • Select + and ‘inner shadow’

  • Blur 20 and select your colour making sure the transparency is at 100% (I changed this slightly and set it at 40 blur)

  • Select + another effect and make it ‘Drop shadow’

  • Blur 20 and select the same colour making sure the transparency is 100%

  • Copy the whole icon layer & Paste removing all the effects on the new layer

  • + Stroke

  • Make it 5 pixel ‘inside’ stroke and 5 pixel blur

  • Add the same colour you have been using to the 5 pixel stroke colour box.


And that was it… I have a neon logo/icon that I can use, this was incredibly simple and I’m quite happy with how it looks so I will screenshot a couple colour variations and pop them on the whiteboard for Adam to take a look at and vote on the one he likes best just so I can get an outside opinion – If this becomes an app that I think could be released in the future I will think about accessibility in the way of colour-blindness etc but at the moment I’m just thinking about what looks cool and the overall simplicity of the usage of the app.


I have asked Adam to ‘Heart’ the coloured icon that he likes best just to show you this on Figma as I think its a nice feature for those working in teams.


Next session I will be looking at creating a draft of the home screen on a Power Apps Canvas, again, just to get a feel for the style of the app and see if its something id like to go forward with theme wise.



18 views0 comments

Comments


bottom of page