It seems there is a way to create prototypes that are so good, no one will assume it’s not production-ready!

I got bored by telling friends while early testing ‘Oh, that part is not yet designed, check this one…’! I want more realistic prototypes without creating endless combinations!

And I discovered the new shiny thing, and this one is not interesting just because it’s new, this seems usable too!

This Intro won’t tell you much about it but feel free to take a look.

What’s the deal about it?

You can use video, maps, login, scroll horizontally/vertically, and more!

Check more about prototype features at Framer Prototype

The good thing for code loving designers is that you can create code components and use React for prototyping! More about Framer & React at FRAMER GUIDE TO REACT.

Framer seems like a great tool, I didn’t fully switch from Adobe XD, but as I need to create more realistic prototypes I will transition to Framer.

If you want to get started with Framer you can watch their quick Framer 101 Crash Course.

I wish you luck and keep hacking!

Since not that long time ago I wanted to publish posts on my blog, but it can be so ‘painful’ for lazy people like me to blog on Jekyll. 😞 Open editor, create and write markdown, use all naming conventions, add thumbnail into assets, push commits, etc… It all seems so overwhelming 😭

Luckily for lazy people like me, I found Siteleaf, and I just needed to connect it with my public GitHub repo, and everything is set!

I’m happy that now I’m able to update my content super fast and from the phone or any other device!

Can’t wait to publish more stuff. See you next time!

These 3 mistakes can make your website look amateur (but don’t worry, everyone made these mistakes), but if you take some time to fix them you will have a great looking website.

Bad contrast

Bad contrast is one of the most common mistakes I see on websites. And I don’t think just about color contrast, I think also about bad contrast when we look at a text or other elements.

As you need to make sure your colors have a good contrast, your text needs also to design so it’s easy to notice what’s important and what not.

One trick I use to make sure my text has good enough contrast is to double the size/weight by importance.

So, if the title is more important than paragraph beneath it, I would double the size of the title, increase the font-weight, and frequently make it darker than a paragraph.

In the example above, the paragraph has 60% opacity, font size 24px, and font-weight of 400. The title has 100% opacity, font size 48px, and font-weight of 900.

Bonus tip: Space between title and paragraph is half of title font size (in this case it’s 24px)

No white space

No white space (no negative space) is a space without any content. It doesn’t have to be white, it’s any space without content.

The idea of negative space is to sort content on your website so users can ‘breath’ and won’t be lost in the content. Having a bad negative space is similar to having a messy room and not knowing where to begin with cleaning.

How you can improve negative space on your website:

• Separate content in sections with space around/between them,
• Improve spacing between title, subtitle, description, images, etc…

We just increase font-weight for a subtitle and added divided content into sections, and our design it’s already better!

Text inconsistency

Don’t use too many colors or too many fonts for your text. You can use multiple font families, but in most cases is not recommended. Just use the same font family with different weight, size, etc.. And, also, be consistent with it. Use the same style for the same element (title, subtitle, button, paragraph, etc..), across all parts of the website.

If you improve those three things, you can drastically improve the design of your website and it will look more professional! Also, your visitors will love it and they will enjoy spending time on your website, and convert more!

Yes, designers should know something about technologies used by developers to bring designs to life.

No, designers should focus on psychology, improving user experience, selling, and other things that will make their designs better.

Designers and Developers need to work together. Combining both will give the best results. If there is a great collaboration between two, products, websites, etc. will be better and things will go smoothly.

Designer should know the limits of coding. Again, imagine holding a ball in your hands and you want to kick it longest possible. Knowing where to throw it (not too near or too far), so you can kick it out with your leg is very important. Same with design, knowing the limitations of coding can be useful in your design process. You don’t want to deliver an amazing looking design that will be badly executed.

To summarize, learn code good enough to understand limitations of it. Instead of going deep into code, go deep into psychology, selling, learning how to interview users, etc. and that way your designs will have the biggest impact.

User experience is every interaction with products you ever had. From driving a bike to downloading and using an app. How did you feel when you tried to open that package, or when you went somewhere and wait a long long time? Bad? Well, that’s probably some bad user experience. How did you feel when you opened that new iPhone box? Good? That’s because of good User Experience!

What is User Experience Design?

UX Design is improving the existing experience so that products can be more useful, usable, and desirable.

• Useful: Does a product serve the purpose?
• Usable: How easy is it to use a product?
• Desirable: How does the product look? Do you wanna use it?

Most of the people reading are interested in the digital part of UX design, like Web, App, or Software UX design. But UX design is not limited to things just mentioned.

UX Designer can also be someone who designs doors, packages, chairs, etc. Most of the people who are working in one part of the industry won’t work in another. So if you are a UX Designer for doors, you probably won’t be interested in Software UX Design, and vice versa.

What Digital UX Designer does?

If you are designing a web application, as every UX designer you are trying to improve those three things we mentioned before.

Your job would be something like improving how a user logs in or register, how it will order something and many more things. Your main goal would be to improve the experience for tasks that users and/or company care about the most. Maybe the user doesn’t care about paying for something every month, but you can bet the company will make it easy to setup auto-charging for a subscription every month!

If you want to become a UX Designer, one of the most important things to learn is to have empathy for a user. Being able to put yourself in someone’s shoes will help you to better understand their problems and needs.

UX Design is improving how people feel before, while, and after interacting with a product (no matter which category a product is a part of).

You can do it easily with the amazing prefers-color-scheme media feature. Scroll down for more.

Dark mode check

prefers-color-scheme: dark

Indicates that user has notified the system that they prefer an interface that has a dark theme.

When you want a style that applies to users with dark mode turned on, add your style inside media query below. If we want the black background and white text for dark mode users, we will type something like this:

  @media (prefers-color-scheme: dark) {
    body {
      background-color: black;
      color: white;
    }
  }

Light mode check

prefers-color-scheme: light

Indicates that user has notified the system that they prefer an interface that has a light theme.

When you want a style that applies to users with ligh mode turned on, add your style inside media query below. If we want the white background and black text for light mode users, we will type something like this:

  @media (prefers-color-scheme: light) {
    body {
      background-color: white;
      color: black;
    }
  }

There is a third option. When a user didn’t set dark/light mode.

prefers-color-scheme: no-preference

Indicates that the user has made no preference known to the system. This keyword value evaluates to false in the boolean context.

Some time ago, I needed a time tracking app for some of my projects. The good thing is that there is a lot of time tracking apps! But, of course, If I were satisfied with some of them, I wouldn’t make this post :D

I wanted a really simple app, just to track my projects and if it’s possible to somehow remind me when to start and stop. Oh, and if there is an app to just stop tracking automatically when I stop working.

After using Toggle for some time, I decided to try designing an app that will suit my needs.

The design was nice, I thought, and I even knew Front-End, but I didn’t want another web time tracker. I didn’t want another tab or window open, I wanted something simple and easy to use.

So I decided to quit

But this year, I started experimenting with something called Electron.js, and it was mind-blowing. I couldn’t believe I can write HTML, CSS, JS, and create an app for macOS, Windows, and Linux, and all that with just one codebase. IT WAS AMAZING!

So I started working on it again

I found Angular-Electron starter kit on GitHub, and slowly started with slicing design screen by screen.

It was an amazing experience. There were so many things that were harder than I expected to be, and there were so many easy to do things that I expected to be hard.

I finally published 1.0.0 version :D

I published a post on Product Hunt, and if you are curious about it, you can visit The Track Website.

Feel free to leave harsh feedback.

I’m planning to launch more products and getting real feedback will prevent me from making the same mistakes again.

The Track GIF:

Why would we do something like that?

All of us have ideas that could help someone or that are just cool. Unfortunately, so many times we don’t have the power to implement the whole idea by ourselves and we just quit. That’s happened to me too. I’m from the Web world, designer, who knows nothing about the backend (I know something about front-end tho), and I wanted to create a desktop app.

I was thinking ‘Naah, maybe sometimes in the future when I find someone who likes an idea’.

But there is a technology that could help me do it, I just couldn’t remember it at that moment.

I was hyped about the idea of a cross-platform app with HTML, CSS, JS, via Electron JS. When I saw that Visual Code, Skype, Atom, Slack and many more apps I’m familiar with were built with Electron It was final, I decided to use Electron to build App I wanted.

With Electron I can use Local and Session Storage, and that’s something I already used to store data for begging.

After I created a functional app (Front-End and used local storage for storing data) I start looking more into Firebase since I wanted to have DB so a user can sync data on all devices.

With the help of Fireship and Coursetro videos I successfully integrated the electron-angular app with Firestore. Finally, users could register/login and use all apps features. They can customize an app, track time and use every feature regardless of the platform.

All this couldn’t be possible without this amazing repo for Angular and Electron, Stack Overflow, and amazing tutorials on Youtube.

I published app on Product Hunt (Got better than expected results), and you can take a look at The Track Website.

It’s great to know that you could create Software or App without being a big expert on native programming languages, database, etc… I will probably try in the future and React Native or Ionic Framework if I get an idea for a mobile app.

Long-time ago, to make your idea happen you would need a team of developers to create an app for different platforms (Not mentioning user auth, DB, etc…). It’s amazing how nowadays with the right tools we can make our idea into reality so easy.