Magazine for designers and web developers

My Process and Tools for Rapid Website Prototyping

Article by georgemartsoukos in Web Design - March 18

There are many times when I choose to create a demo website. One such time, for example, is when I want to experiment with new, cutting-edge features.

With such cases in mind, I decided to write an article to share with you the methods and tools I use for quick website development. Remember to keep in mind that many of the things that will be covered here could be applied to your daily workflow as a web professional as well.

1. Inspiration

I always visit different sources for inspiration: Awwwards, Codepen, and Dribbble are just a few examples.

Awwwards

Awwwards is an organization that gives awards to people who create unique, innovative digital experiences. People can submit their website for evaluation by a jury made up of web experts from around the world. Websites with the highest scores get special awards and gain recognition.

Awwwards

Codepen

Codepen is an online code editor to help you experiment with front-end development and which allows you to share your "pens" with others.

Codepen

Dribbble

Dribbble is the meeting point for designers. It can be used as a tool for design sharing, self-promotion, and as a way to build up your reputation.

Dribbble

2. Design

At this stage, I have a basic idea of the site that I want to build. So, I start sketching it using paper or/and a wireframing tool. Although there are many interesting tools out there, my preference is Balsamiq.

Balsamiq Mockups

Balsamiq is a wireframing tool that allows you to create quick sketches for your site or app. It comes with some handy features like a drag and drop interface, which simplifies the process of creating mockups. It's not a free tool, but there's a 7­-day free trial.

Balsamiq

3. Develop

At this point, I’ve finished designing my site and I'm ready to start coding it. When coding, I like to use several front-end frameworks: Bootstrap, Compass, and Foundation are a few of my choices. Moreover, if needed, I use Sass for scalable and modular CSS architecture.

Throughout the development phase, I also include assets (images, fonts, text) in my project to enhance its appearance.

Bootstrap

Bootstrap is one of the most popular mobile first front­end frameworks. It provides dozens of custom, ready­ to­ use components that help you kick start development.

Bootstrap

Compass

Compass is a framework built with Sass. It comes with flexible Sass mixins and functions which you can use in your own projects. Personally, I love its features for creating sprite sheets and implementing vertical rhythm.

Compass

Foundation

Foundation is Bootstrap's main rival. It's equally popular due to its mobile first approach and its ability to be highly customized.

Foundation

4. Web Fonts

Web Fonts can be open source or paid, self­hosted or hosted. Examples of popular web font providers are Google Fonts, Typekit, and Font Squirrel. For my projects, I usually select one or two custom fonts from the Google Fonts library.

Google Fonts

Google Fonts is a collection of free fonts provided by Google. There are hundreds of different font families from which you can choose in order to find those that work best for your project. For instance, some of my choices are:

Google Fonts

5. Icons

Icon fonts are an increasingly popular web design trend. If you want to know more about them, I suggest you read my article. In that article, I also analyze two of my favorite icon fonts: Icomoon and Font Awesome.

In addition to the icon fonts I just mentioned, let me show you two other great resources to apply icons to your projects:

Fontello

Fontello is an open source icon font generator. It hosts different font packages from which you can choose and download the icons that you want.

Fontello

CopyPasteCharacter

CopyPasteCharacter is a web application that makes a variety of characters available to you for use in your work. I love this library because you can take advantage of it without having to import any external assets (like icon fonts).

Copypastecharacter

6. Images

There are many photo libraries (open source and premium) on the web where you can find images. Examples of libraries that I've used and tried in the past are:

Gratisography

Gratisography offers free, high-resolution images. Its library is updated weekly with new content. You use its images in any way you’d like.

Gratisography

Placehold.it

Placehold.it is an image generator that allows you to create images for your website and offers some customizable options. For instance, you can select the dimensions or the background color of the images you generate.

Placehold.it

Unsplash

Unsplash is a great gallery for those who want free, high-resolution photos. Its collection is updated with ten new photos every ten days. Also, keep an eye on Unsplash.it], an image placeholder which uses images from Unsplash.

Unsplash

7. Text

Populating your web pages with dummy text and images is useful because it gives you a clear view of what you design. Just like images, there are plenty of text generators available. Lorem Ipsum and Blind Text Generator are the ones I prefer.

Lorem Ipsum

Lorem Ipsum is the standard dummy text generator. You specify the number of paragraphs, words, or lists that you want and the tool generates them for you. It’s as simple as that.

Lorem Ipsum

Blind Text Generator

Blind Text Generator is an alternative solution for generating text. Beyond the basic options that Lorem Ipsum offers, it comes with some extra features as well. One interesting feature is that it gives you the ability to customize the styling of the text.

blindtextgenerator

8. Testing

At this stage, my development phase has finished and I'm ready to test the website. This can be simple or more complex, depending on the structure of the site. For example, if I've used the ‘flexbox’ CSS property, then I definitely have to check it across different browsers. After having tried different testing tools, my top choice is BrowserStack.

BrowserStack

BrowserStack is a cross-browser testing tool. Instead of having to install virtual machines and emulators for your testing, this tool does all the dirty work for you. Even though it's not an open source solution, it offers different membership plans to fit your budget.

browserstack

9. Hosting

As a last step, now that my website has been tested, I'm ready to upload it to a server. Again, there is a plethora of hosting services available which are either premium, like iPage, or free, like Codepen or Github. For simple projects and demos, Codepen works fine for me.

10. Help

Most of the time during the development process I need help. One reason, for example, could be that my Sass code doesn’t compile into the expected CSS. In such cases, there are many helpful resources available. MDN, Stack Overflow, and W3C are some examples.

MDN

Mozilla Developer Network (MDN) is a valuable meeting place for web developers. It helps them gain knowledge and refresh their skills relating to open source web technologies.

Mozilla MDN

Stack Overflow

Stack Overflow is a question and answer community which caters to programmers. It's the perfect place to find answers to your Javascript questions or to reply to PHP questions that other programmers have asked.

Stack Overflow

W3C

World Wide Web Consortium (W3C) is an international community whose goal is to develop web standards.

W3C

Conclusion

In this article, I’ve shared with you the resources, method and tools that I use to build a demo website. With any luck, you have been able to find some of them useful.

And you? What are some of your time-tested processes and favorite tools?