Visual Library Design Process – Step 2

I went a step further on the design of the Visual Library App.

This post was describing the preceding step.

I did a detour to try new tools.

Trying MarvelApp

Makayla told me about marvel app. I gave it a try.

Trying Adobe XD

I discovered Adobe XD during a training with Sarah Drasner at Frontend Masters.
Since I had Adobe XD installed, I tried it on this project. The real benefit is the simulation tool. Nicer than my video but still far from a proof of concept.

that’s the link to the simulation. I’ll do it again on FramerX afterward. I expect something way more interesting.

Trying Sketch

Sketch is the app of choice for a lot of designers. Easier and cheaper than Photoshop, tailored for this need. It’s very easy to use, there are many plugins to help the work.

Importing my hand made sketches was easy. However, there is not much more you can do. I will keep using it as the front end of FramerX. FramerX is rather poor in drawing.

Real work started with FramerX

– Copy/pasted all the sketches from Sketch into FramerX. Super easy and reliable.
– Identified all the components
– Created a frame with all the components
– Placed instances of said components on every instance on each page. I added a blue or green background to components so it’s easy to spot where they are.
– I admit it’s not very pretty. I’m really exploring the process from early sketches to the final app.
– I should have nicer designs, I’ll be more careful with the next iteration.

Keep in mind it’s also a proof of concept for my design workflow. I expect to perfect the process to have nicer shareable later.

What’s Next?

Now I’m working on a small script that takes the design on FramerX and generates a complete react native app + PWA.