Design on blog.iankulin.com

Using AI to Generate Icons

Tue, 11 Oct 2022 00:00:00 +0000

Since I have minimal design skills, I went back to Fiverr (the digital gig economy platform) to get some icons done for CodeTrimmer - explaining that I wanted something like a “pair of scissors floating over some computer code”. At the same time I’ve been playing with DiffusionBee - a free Apple silicon version of the Stable Diffusion artifical intellligence that generates images from text prompts. The image above was created on an M1 Macbook using DiffusionBee.

Since generating an image from a text prompt is exactly what I’d just done with Fiverr, I thought I’d give the AI a chance. Even if the results are not great, they will do for the toy applications I’m creating as I’m learning.

The model in Stable Diffusion is trained on images scraped from the internet, so it’s strong on pop culture and painting styles. For instance “Jack Black as Aquaman” is likely to give good results, also “Kermit dressed as Yoda in front of a sunset landscape”. The license for the outputs of the AI is quite permissive, including for commercial purposes as long as it’s not used for evil (that’s my paraphrasing, the actual CreativeML Open RAIL-M license is here).

Here’s a couple of outputs for the different versions of the “scissors floating over code, macOS, icon” prompt.

Like any tool, there is a skill to using it well, and with image generation from text prompts, the skill is in creating the prompts, hence a sudden plethora of articles about this all over the internet, and even a market for them. So perhaps with a bit more skill I’d get something closer to what I’d like, although if you are prepared to accept something a bit abstract a couple of these would be fine.

If I had a small amount of design skills these images might serve as a great creative thinking starting point - for example I like the criss-crossy background of one to represent code. I like the drop shadow and flat green of the ipod shuffle one - so these ideas could be combined to make a pair of flat green handled scissors floating over the lined background.

If you are not allowed to use AI’s for evil (I’m looking at you Skynet), it seems like using them as a tool for creating okay images for apps and other digital content is likely to become a practical use for them.

Design Challenge

Wed, 05 Oct 2022 00:00:00 +0000

So, I’ve been working on translating the UI design created by the external designer into SwiftUI, and have done all of the easy bits:

The rounded rectangles for things like the question display/number input are just ZStacks of roundedrects filled, then stroked:

ZStack {
 RoundedRectangle(cornerRadius: 10)
 .fill(.white)
 .padding(.horizontal)
 RoundedRectangle(cornerRadius: 10)
 .stroke(.black, lineWidth: 2)
 .padding(.horizontal)
 HStack {
 Text(questionText)
 .font(.title)
 .fontWeight(.heavy)
 Text(calculatorDisplay)
 .font(.title)
 .fontWeight(.heavy)
 .foregroundColor(.blue)
 }
}
.frame(maxWidth: 350)
.offset(y: 15)

Something I have learned in the process is the .offset modifer. This is what’s used to move a view from where SwiftUI would have placed it, and is what I’ve done to create that overlapped style where the question display/number input is sitting halfway over the bottom of the blue rounded rectangle. This is in the last line of the code above: .offset(y: 15) This is moving the whole ZStack down by 15. A trick to watch with this is that since you’ve messed with SwiftUI’s arrangement, it doesn’t then shuffle everything else around this - you need to manually deal with making some space below it.

The jobs still to do on this view is the customisation of the picker, which I think is going to have to be writing a picker from scratch (or finding the source for the library picker and altering it), and the even more custom combined picker/progress indicator.

Color Picker (website)

Tue, 04 Oct 2022 00:00:00 +0000

I’ve started work on trying to recreate a UI provided by a designer, and in the process needed to identify some colours from a PNG image. I found this great website for this exact purpose.

The site is ImageColorPicker. To use it, you “upload” your image (actually the image is not going anywhere - it’s all done in-browser). Then click on any area you want to identify the colour of.

It gives the RGB values out of 255, so I divide each one by 255 to get the CGFloat values that the SwiftUI Color() type will take - for example I used the colour above as Color(red: 0.89, green: 0.96, blue: 1.0)

Design Help

Mon, 03 Oct 2022 00:00:00 +0000

I think I mentioned when I’d completed the TimesTable app, that I was not happy with the design. It’s ugly, I don’t like the way the feedback about a wrong answer is shown at the same time as the next question, the number of questions setting would be rarely changed and looks uncomfortable where it is, I’m not sure the purpose of the picker for which times table would be clear, and it’s not appealing to children.

I’ve used Fiverr before to have various bits of graphic design done, so I thought I’d have a look, and sure enough there is a heap of people offering UI & UX design. Prices vary widely - from about $10 to $2000AUD. The lower end ones are generally newer entrants. There was a suspicious number of incredibly beautiful looking Ukrainian women wanting UX design gigs - I assumed they were fake and picked a couple of others.

Here’s the results so far (one guy is still making changes).

This one combined the number input with the question text - that’s smart. To change the number of questions you click on the circle at the top, then it shows you which question you are up to, plus the circle edge is indicating your progress. I love all of that, but do not like having “Question” written there. There’s no solution offered for showing you’ve got the question correct or wrong, but maybe I could do that in the sum area (with an animated tick, or a crossing out and re-writing). The picker for which table to practice is pretty similar in function. I didn’t like the backspace button - but the designer pushed back saying it met the brief of appealing to kids. I love the layered rounded rectangles, and the inset for the question progress. I’m not so keen on having “Times Tables” written at the top, ot the line underneath it. In my version, the title is animated a little to indicated right/wrong answers so perhaps that’s why this designer kept it.

This designer’s first draft was black and white, so apart from moving the backspace (which I like) it was just a less ugly version of my UI. When I asked about how this was appealing to kids, he hit on these colours, which I think are great. The non-centred number of questions is driving me mental, but the designer is currently working on shrinking that somehow and moving it up to the light bulb in the top right. His idea for that was that it would give the user a hint when they clicked on it. That seemed like a change in functionality rather than a UX improvement to me. It turned out he was also a budding mobile developer, so he’d actually built the entire app - I’m not sure if in Flutter or Swift - either way, it looks like I could actually build it with my current skills (although perhaps not that picker). Unlike the first design with the inset and overlapping shapes that’s going to require some googling if it’s possible at all.

So far, this has been a good experiment. Both designers quickly came up with something much prettier than I had, and although neither of them look perfect to me, now that I’ve seen them I have ideas to improve them.

Now, the interesting challenge is to see how close I can get to implementing them!

Calculator

Thu, 29 Sep 2022 00:00:00 +0000

The app I’m working on currently (for multiplication tables practice) has a number type keypad and display a bit like a calculator - but for entering the answers. It’s been quite fun to think through all the little problems to make it work how you’d expect, so I was quite interested to watch an iOS Academy video where Afraz Siddiqui builds a partially finished SwiftUI version of the iOS Calculator app.

It is a great example for beginners to see the power of building views quickly in SwiftUI, but the most fun part for me was thinking of all the edge cases that would hadn’t been dealt with in his quick build out of the logic (which wasn’t the point of the video).

A couple of times I’ve thought about building copies of existing Apple iOS apps. I think part of the appeal is that the design work is done for me, so I’m just thinking about under the hood. Long term, I need to know more about design and to be better at it - I bet there’s a Meng To course that would be a good starting point.

App Idea

Tue, 05 Jul 2022 00:00:00 +0000

Here’s a rough plan for a “hello world” that’s simple enough to be achieved in the short term, but hopefully not too trivial to be accepted into the app store.

This is sketched out on GoodNotes 5. I started with the Apple Notes app, but was frustrated by not being able to mix text and drawing. Noteabilty looked great, but the once off purchase for GoodNotes was easier to swallow.

Ignore the “Friday"s in the design above - they should be Sundays. Basically, the user selects a year, and the app says the day for the Easter Sunday that year. If the user needs the date for something, they click on it and it’s copied to the clipboard, or perhaps opens up in their calendar.

I do have an accessibility concern about those scrolling number pickers - what’s the sight impaired experience? Maybe Apple’s already solved that since they seem like a common UI thing.