• aditya mehrotra.

icon design for MIT SPL software [funsies]

Soooo tonight I want to have some fun designing an ICON for the GUI being built for the research lab I'm a part of. I can't show the GUI here right now but what I can show is the design guidelines for MacOS apps: https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/


Here are some tips from apple developers:

  • Design a recognizable icon...

  • Embrace simplicity...

  • Consider giving the icon a realistic shape...

  • Provide a single focus point...

  • Design an icon with appropriate perspective and a realistic drop shadow...



So to do this, we're going to download the 30 day free trial of SKETCH. And design the icon in that.



Okay so after really accidentally messing around this is what we got:



Important notes for this design:

  • Outermost circle has a border and shadows on the OUTSIDE

  • Innermost circle has NO BORDER but shadows on the INSIDE

  • Outermost circle has the color: D8D8D8

  • Innermost circle has the color: EA9393

Now this is a good looking ICON so far, we need to decide what we really want to put inside the icon, maybe a rocket? Let's list some things:

  • This software is a post-processing software for the data coming from a rocket engine simulator.

So let's get this really nice rocket design from an online editor we saw. It's a free logo generator so we can actually us the design, and now the logo looks like this:



Now we want to add one more thing over this and it's text and that should either say SPL or really the name of the program, a good color for this text is like this: 855F5F, or 8E6D6D we'll play and see.

  • So we're going to call this app the SOLVEiT POST PROCESSOR (SPP) we're realizing that 855F5F is a better color for this text we're now looking at something like this...



OR if we want to do the MIT SPL logo or something we can do something that looks like this:



Let's go with SPP for now which stands for "SOLVEiT Post Processor." That's a good name that describes exactly what it does. If we want to change it later we can just come in and fix it. Here's the final APP ICON:



So there's shadows and everything this looks much much better than the old icon design we had going around. Let's export this and use it. Now let's open it in Preview just to make sure that everything is going on okay over here and then run the python GUI to see our beautiful logo. We might add things like stars later to that background but who knows it might be beautiful as it is - I really like it.



LOOK! There it is in the bottom corner. Isn't it pretty? I think it's a good logo. for the project. Not too much detail and it's a nice thing to be able to open up and see. We'll just need to package the app in such a way that we can add that to our applications folder and then clicking on it will run SOLVEIT.py or something.


But that's it! let's look at the icon one more time from the world of preview:



"Spicy" is what I would call that :))) that was fun and Sketch is a really fun software. So powerful and really easy to use. If I end up really liking it maybe we'll actually get a copy.


#updates #omgSPL #SOLVEIT_Project #yay

2 views0 comments
© copyright 2019 | aditya mehrotra