iOS is one of the most successful mobile operating systems in the world. Its success, along with the rise of smartphones, represented a major change on the software development market, due to the high demand of mobile apps. This forced many developers to adjust and learn, if they didn’t know already, new programming languages like […]
Pure CSS Off-Canvas Menu
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 […]
Code School’s Adventures in Web Animations Review
In our previous article Web designer’s ultimate list of free resources, we decided to share with everybody the resources we use in our design and development process, an article that proved to be very popular on different web design communities. As a result, we ended up getting in touch with Code School’s Nick Roberts. We agreed […]
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 […]
Web designer’s ultimate list of free resources
Whether you build a site or an app you need to use some resources in your design process: images or fonts, background patterns or color suggestions. Maybe you’re stuck in a rut and need some inspiration? In this article I’ll show you the best free resources to use in your next design. These are the […]
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 […]