How to build a simple portfolio website with amazing, interactive project case studies directly in your browser. PS: No coding skills required.
After a huge success with my last article for designers, called “How To Build a Better Case Study” (viewed more than 19,000 times, wow 😱), I decided to focus next on an important topic in a designer’s life — building a portfolio website.
I’ve recently launched a new portfolio site myself and used Readymag to build it. I would like to tell you more about the process today.
What's Readymag? Let's start with a proper introduction…
“A web-based tool for designing things of any kind — websites, presentations, digital magazines and more.”
Actually, we can save some time and reading here just check the short video below to understand the basics before we continue:
You maybe already saw RM in action but don’t even know about it 😂
Anton & Irene have been using it for their detailed project case studies, might have seen Claudio's personal portfolio, downloaded Platforma iOS Wireframe Kit or stumbled upon one of the great magazines—like Shuffle. More and more creatives are using Readymag to build almost anything online.
I knew about Readymag for a while, but only recently managed to try it out. I ended up launching my new site within a few days and felt absolutely amazing about the whole experience.
What is so special about this platform?
Why everyone likes using it so much?
What I love the most about Readymag is the editor. It’s basically like starting with a blank new canvas in Sketch or Photoshop. But this time it’s right in your browser. You can just focus on your creativity — there are no coding skills required 👍
Everything you create inside the editor using its drag-n-drop interface is automatically “coded in the background” and saved in seconds. You can switch between the editor and preview to see what your project looks live.
Check out a little preview of the interface and components (or “widgets,” as they call them) you can use to build your projects:
The user interface is intuitive and you can learn the basics within minutes. I found this great video to guide you through some of the key features and the process of creating:
Everything you design for desktop can be easily transformed into both tablet and mobile version. Responsive design is turned off by default, but once you flip the switch in the editor, it unlocks even more possibilities.
The platform itself doesn’t do any scaling or layout adjustments, but it gives you a free hand to create whatever you want for 3 different device sizes. I personally kind of like that approach 🤔
You can easily customize existing elements imported automatically from the desktop version, or even create a completely new version for — let’s say — mobile-only. How? The editor allows you to hide elements you choose and you can add new ones with different styles or sizes.
Watch this demo video to learn more about building responsive pages.
Want to spice up your experience, or make it bit more interactive? You can choose from various animation triggers like “on load”, scroll, click or hover for each widget in your project. Then apply a specific effect (move, opacity, rotate or scale) that will run once you pull the trigger.
You can do pretty insane combinations using multiple steps and affects. I really admire this example from Anton ✈️
I would definitely recommend you joined Readymag’s newsletter ✉️ to get the latest updates on what’s coming next. The team is constantly working on more features to make creating and editing even easier.
An email with a new update in my inbox always makes my day better. The platform itself is getting better with every update. I also remember I’ve received a special questionnaire some time ago asking about my wishes or feature recommendations.
Btw. You just can't miss those beautiful email covers in your inbox.
Every time you get lost or have a small issue, just check out the Readymag Help section. Well organized guides and short videos are awesome for learning all about widgets and tricks you can do. Those videos helped me a lot and also inspired me to try various experiments.
There is also a special Design School by Readymag — A series of educational projects about design. For me personally, it’s proof of how much they care about their customers. Always trying to share their know-how and educate their audience to help them build awesome projects.
I’ve mentioned just selected things I like the most, but there are a few more short points about other advanced features you can use:
🌏 Custom domain — You can stick with “name.readymag.com” if you want, but also use your own domain to host your project (great for standalone websites and portfolios). All you have to do is change a few records and follow a simple guide from Readymag. Easy.
⚒ Embed code — If even after all those built-in features you’re still missing some functionality, you can reach out for the “Embed” widget. For example, I’m using it for my Mailchimp form to gather emails for my newsletter.
🔤 Custom fonts — Can’t choose between thousands of great fonts from Google Fonts, Webtype or Typekit? That’s ok, you can just upload your own in a beautifully designed font explorer.
… and many more other features like Password Protection, SEO, Google Analytics, PDF export or Amazon hosting.
Well, everything I mentioned sounds great, isn’t it? But is Readymag the right choice for you? Let me help you to decide:
Readymag IS for…
- Anyone who wants to get creative without coding
- Anyone who is limited by “dev resources” (every team knows that :))
- Anyone who wants to present something quickly
- One-page, simple, original portfolios or product pages
- Case studies, publications, magazines or presentations
- Web presentation with interactive components
Readymag IS NOT for…
- Complex websites with multiple subpages
- E-commerce, portals or other content-heavy websites
Have more questions about the creative process or using specific features? Just ping me! I would love to bring more people over to this platform so we can all create amazing projects!
To wrap up this article I’ve collected a few inspiring portfolio sites built with Readymag to show you what’s possible. Which one is your favorite?
PS: There is also a special page dedicated to more featured projects.
What are you waiting for? Just unlock your creativity👇
Did you enjoy the reading? You may like my new ebook about Instagram — The Perfect Grid: A Creative’s Guide To Instagram
STRV is a one-stop mobile app development shop working with top-tier startups from Y Combinator and 500 Startups, among others, across offices in San Francisco, Los Angeles, New York and Prague.