Published on | Prototyping: From UX to Front End — Medium Shir Zalzberg

For the last few weeks, we’ve been on the lookout for a new designer to join our team at OverOps.

As the only designer in the company at that time, I was extremely excited! And mainly because I had no one to share my judgy designer comments over the takeaway menus. It was the first time for me on that side of the table, being the one who interviews rather than being interviewed myself.

I also had to go through a multitude of portfolios, and I reached two conclusions:
A. A lot of awesome designers don’t present their portfolio well enough and that’s a shame.
B. I’m such a hypocrite. How dare I judge other people’s portfolios while mine wouldn’t pass my own standards?

Being in that position made me realise that I must meet the expectations I set for others, and that it’s time to create a new portfolio for myself. The design took only a week, and all that was left was to “build” it. Easy right? So I thought, and how naive I was.

“So I’ll build an online portfolio, how hard can it be?”

Still in my initial naive state of mind, I tried several online website builders. My first instinct was to go with Wix, but looking into their builder I quickly realised it is too limited for what I had in mind.Next were Webflow, Webydo and Squarespace, but none of them delivered what I needed.

I did consider WordPress for a time, but i have to be honest — Im terribly afraid of WordPress. After spending a week looking for the right WordPress template I ran with my tail between my legs. At one point I even started looking for a Freelance Dev through Fiverr, but the ones in my budget didn’t even answer me back. And then, just before i was ready to abandon the idea of a new portfolio, I came across a new tool — RapidUI.

Who are you RapidUI?

RapidUI is a rather new company, Established in 2016. Their product allows designers to upload a sketch/psd file into their web app and transform their file into a live (and responsive!) website.

Through their interface you’ll be able to create new elements, change colors, sizes and margins, animate objects and create breakpoints for a perfect responsive design. You can even enter your own code so you’ll be able to reach the perfect result. That was exactly what I was looking for.

Why am I telling you about them?

I was on the verge of letting go when I tried using RapidUI, and I have to admit, it wasn’t the easiest ride. Their product is new which means you might encounter a few bugs from time to time. On some cases, small mistakes that i’ve made took hours to fix.

I went through a very a steep learning curve and asked for help from RapidUI numerous times. Each time I asked for help, it felt as if they all stopped everything they were doing just to help me. Their dedication to their users (in this case, me!) impressed me so much that I gave their tool a real shot, and it payed off. 12 days later, I had a live portfolio website I created myself, and it’s a website I’ll be able to update and change on my own at any giving moment, without the help of a developer. Check it out here if you’re curious.

A self portrait, I named it “It’s 3AM and I just deleted all my breakpoints”.

How to start working with RapidUI?

As I said, I had a rocky start, and it takes time to get the hang of it.Right now, their product is free (my favourite price), in the future they will continue to have a free plan where users only pay for storage or for advanced features.

When you’ll start your first project, you’ll have an onboarding experience that will guide you through.I also recommend watching this video which answers a lot of questions. If you have any other questions, you can contact them directly through their facebook page. They helped me with any question I had, no matter how basic it might have been.

It’s important to point out that I wouldn’t recommend this tool for designers who don’t have at least a basic understanding of html and css.

—

This project proved to be a great learning experience. If i knew then what I know now, I have no doubt I would have build my portfolio in a smarter and quicker way. SO, here are my top 10 tips for creating your first RapidUI website, hopefully they will help you use this tools smoothly and prevent you from making the mistakes I made.

So here they are! My top 8 tips (written with tears and sleepless nights)

Work with percentages
This is probably the most important advice i have for you, and it will save you hours of works if you follow it. Work with percentages — ALWAYS.
So what does it mean? Every object in your screen gets “instruction” regarding its position. You can tell a certain object to be placed 96px from the right edge of the page, OR you can define its distance to be 5% from the right edge of the page. In a 1920px screen the two options will look the same, so when does it make a difference? When you make a responsive page and try to fit it into smaller screens. This way, objects that were defined with percentage will keep the correct distance ratio and will require far less adjustments. By using percentages you will have to create far less breakpoints and make you life easier.

2. Keep Image Proportion

When uploading a new image, you will come across a magical checkbox called “preserve image proportions”. Checking this box will lock the image resolution to its original proportions and keep it from distorting. I suggest you keep this box checked at all times, and also define the image’s width in percentages. Just like in section 1, this will save you unnecessary breakpoints and help create a responsive website.

3. Pre plan your work order

As of right now you can’t copy and paste elements from one page to the other. If you made a detailed menu for a mobile page, packed with animations and links, you will have to build it again from scratch when you make a new page, because you won’t be able to copy it. So what can we do? Duplicate the page instead of creating a new one. As long as you pages keep a similar structure, you can always duplicate you pages and change only parts of the new versions, This will help you keep complex elements and save hours of work

4. Mind the Gap

New text automatically have 10px padding around them. This could be very useful, but also very confusing when you’re trying to align a text block with an element that doesn’t have any padding. When necessary, just change padding through your “Style” menu, which brings us to our next point…

5. “Align” is you best friend

When choosing two objects or more you will be able to align them through the options window. The “Align” function is just like the one you know from PS \ Sketch, and its just as efficient and time saving here.

6. Keep Calm And group together

The “Group” function is just like any other program you work with. If you have several elements that you want to always move together, left aligned paragraphs for example, just group them to insure they move together, and keep the same distance from the corners.

7. Save history

In the bottom right corner you will find clock icon, and a world of wonders will reveal itself when you click it. In there you will find old version of your page, from every single saved version you made (and automatic saves as well!). If you made a mistake or had a change of heart regarding your last draft, just jump back! Pay attention to the fact that you last saved version is on the top of the list and not the bottom.

8. How to upload files (for you Sketch users)

Every once in a while I came across a failed upload attempt, and i’ve reached a few conclusion about it:

If the file you uploading is currently open on Sketch it might cause a problem, close it.
Even though Rapid UI lets you choose a specific ArtBoard from you file, I still came into problems with very large files. To avoid this, I separated the ArtBoards i wanted to work with to standalone files, which made uploading much easier
If your file still won’t upload you can try and remove the image from it. This will make it lighter, and you can always add the images back. Doing this actually made things easier in the long run because it helped me control the positions of the images.

did you try Rapid UI? Have any tips?
Got more cool tools to recommend? Let me know
—
Did you know that every time you clap for a medium design article, an angel gets gradient wings? Start right now! >

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How I created my portfolio without writing one line of code (almost) was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How I created my portfolio without writing one line of code (almost)

Cool stuff, every week

More Articles