New SP-Studio: mobile version

Today I want to show you the new (and very likely final ;)) design of the new SP-Studio’s mobile version. I already showed this to my Patreon supporters and in my Twitch livestream last weekend, but now it’s finally time to share some screenshots in this blog as well. So let’s have a look at what Lars developed for us, because I can’t wait to show this to all you!

Please remember: This is work in progress. I like the design very much and many functions are already implemented, but there is still room for changes until launch. For example a new font is very likely to be used. But everything you see in these screenshots is actually running.

You might remember my first layouts from 2018 for a mobile design. Back then my main goal was to make one design work on all devises, just in case I won’t be able to afford a programmer to code different versions. But as I explained in my last blog post Lars offered help with the software development in React – and he created a way better mobile version than I hoped for!

A big change is the vertical design, which is more comfortable for your hands. There will be an improved version for big screens as well, but for now Lars concentrated on the mobile version. While the space on a smartphone is very limited the UI still feels intuitive and lets you move through categories and options smoothly. When you click on the menu button in the center you have instant access to all categories. Each category is devided into 5 subcategories. You can scroll through the item list and tap on an item to add it to your picture.

You might wonder: How is the item menu supposed to work? It would have been difficult to tap at a small item, so we changed it completely. Now these little “options” icons appear on each thumbnail after you added items to your picture. Click on it again (or double click) to access the item options (color changes, moving, flipping,…). The options are not ready yet so I did not include a screenshot yet. But you don’t want to search for the thumbnail of an item if you want to edit it later? No problem. There also is the pencil icon which directly leads to a list of all included items currently in your picture. You can see it in the right screenshot down there. From this list you can easily edit or delete all items in your picture. There also is a button to clear everything if you want to start from scratch.

How about saving your artwork? This is already working, so I can confirm that you will be able to save your picture as an image file to your computer easily. In addition we have a new button, which will give you a link you can send to a friend or save for yourself. With this link you can continue to edit a picture later. It saves the items you included and how you edited their position or colors. I love this new feature and I am sure the SP-Studio visitors will love it as well! Your progress can also be saved automatically with cookies.

There are two more buttons in the main menu. The one on the left gives you access to the different areas of the SP-Studio website (blog, contests, forum,…). So there is no need to scroll the mobile website, everything has its place. The icon on the right leads to information about copyrights or how to use the SP-Studio. This is not included yet, but I can tell you about a special feature Lars included: multiple languages! The new SP-Studio can detect the language of your browser and change accordingly. For launch Englisch and German are the two supported languages, but more might come later if I find native speakers who want to help with the translation.

Everything you just saw works in your web browser. No need for any plugins anymore. But the current plan is to make it work as a Progressive Web App as well. Then it would even run offline on your mobile device.

That’s it for today. Feel free to ask any questions in the comments and give me feedback. After struggling with the Flash problem for nearly 3 years and getting really depressed because of this whole situation I feel super happy now about the progress. Thanks to Lars of course, because I could not have coded this. So I hope you liked what we showed you so far. :) Things are looking good that the new SP-Studio will launch around the end of the year when the Flash version will stop working.

Comments

  1. I can translate that im learning spanish

    Spanish
    Esta muy buena página me ayudó a hacer mi personaje y ¿cuándo saldrá más o menos la versión móvil ???

    English
    This very good page helped me to make my character and when will the mobile version more or less come out ???

Leave a Reply

Your email address will not be published. Required fields are marked *

You can set your own profile picture for the comments at Gravatar.com by connecting it to your e-mail address.