The off-canvas menu is a popular design pattern used in today’s modern responsive web and app design. It’s a popular alternative to the dropdown menu, especially if you want to display more than navigation links. To build the off-canvas menu we’ll only use HTML and CSS. That’s right, no JavaScript! Download source files View Demo […]
Posts from category: Web Design
Modern Hero Areas with HTML5 videos
A common trend in today’s webdesign is having a background video in the hero area of your site, instead of an image. A good video is an ideal way to add interest to your site or product. In the old days, you would add a video by using third party plug-ins (like Flash), but now […]
Photoshop to HTML: The Agency portfolio conversion – Part 2
Moving on from where we left off, we’ll create the remaining site sections: CTA section, About us, Testimonials, Blog section, Contact area and Footer. We’ll also create the responsive media queries and our custom JavaScript. 7. CTA Section This section has a nice background from OnextraPixel, a short paragraph and CTA button. Step 1 – […]
Photoshop to HTML: The Agency portfolio conversion – Part 1
In the first part of this series, we learned how to design a modern agency portfolio in Photoshop. Now it’s time to convert the Photoshop design to a working HTML5/CSS3 website. We are also going to use a little bit of javascript to filter the portfolio items and add additional functionality to our site. To […]
Filterable portfolio with Shuffle.JS and Bootstrap 3
In this lesson I’ll show you how to build a basic responsive and filterable portfolio powered by Bootstrap 3 and Shuffle.JS. Shuffle.JS is a free alternative to the popular Isotope plugin. Final Result: Download source files View Demo Resources used Bootstrap 3 Shuffle.JS jQuery throttle / debounce pictures from Lorempixel pictures from Lorempicsum 1. Download […]
Create a design agency portfolio in Photoshop – Part 2
In this lesson we’ll continue where we left off in Part 1. To view the template, click this link. You can also directly download The Agency template. 7. About us section The next step in our design is creating the About us section. This section features 3 accordion style drop-downs and skill-bars used to visually […]
Create a design agency portfolio in Photoshop – Part 1
In the first part of this series I’ll show you how to set-up the document and how to design The Agency’s Header, Hero area, Services and Portfolio sections and we’ll also create a call to action banner using Adobe Photoshop CC. To keep the design consistent, we’ll use a grid system. The grid contains 12 […]
Create a design agency portfolio from scratch
In this massive tutorial series we’re going to build a modern webdesign portfolio for a fictional agency from scratch. We’ll design the template in Photoshop CC and then we’ll convert the resulting PSD document into a high-quality HTML5/CSS3 template. No steps will be skipped and every step will be explained in great detail. The design […]
Create your own Grid System in Photoshop
Grid systems are an important part of the design process. Grids help you better organize the content on the page and balance the design, by designing in proportions with respect to the size of the grid. This will create an uniform look in your designs, allowing you to display the content in a more readable […]