Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Articles Tagged ‘design’

Free icons for web developers

Monday, June 19th, 2017 by Servage
iconsA website with no images would look quite dull, and making graphics from scratch can be a difficult task. Since not all developers are graphic designers, many free and paid icon sets and libraries have become popular among front-end developers. They allow you to easily place a large variety of icons on a website. Here is a collection of such icon libraries that are popular among developers in 2017. Glyphicons Glyphicons is an icon library that become popular with Bootstrap since it is built into the framework. Glyphicons has a special license that allows developers to use the Halflings icon set for free in their Bootstrap-powered websites. The Halflings set comes with over ...

Creating cool animated typing effects

Sunday, August 7th, 2016 by Servage
typerjsTyper.js is a JavaScript library that allows you to create animated typing effects for any kind of text. Animated typing is often found on product landing pages to impress visitors with features of a product. In addition to a nice visual experience, libraries like Typer.js allow you to have many sentences that erase the previous one, resulting in less screen space required for text. Getting started Setting up Typer.js on your website is simple: Just download the JavaScript file from www.steven.codes/typejs and include it on your website using a <script> tag and you are ready to go! Unlike many other JavaScript libraries, Typer.js does not depend on jQuery or any other libraries. It ...

Pros and cons of implementing autoplay videos in your design

Thursday, June 23rd, 2016 by Servage
videoplayerIf you are one of the people who like to stay up to date with current web design trends and popular features, you have probably noticed that more and more businesses tend to choose autoplay videos for their homepage or other pages. Even though they seemed kind of cool at first, you are still not sure if an autoplay video would be the right way to go for your business and you have a lot of questions about them. So what are the advantages of auto play videos and do they bring any real value to a business? What are the disadvantages of adding one to your website? Motion pictures are worth ...

Web design with Photoshop part 10/10 – Footer

Wednesday, May 11th, 2016 by Servage
photoshopThis is the last article which concludes the example template design, and here at the end you will learn how to add a footer-section to the PSD template. It will consume the remaining area of the canvas below the other content. Start by drawing a rectangular background with the help of the rectangle tool, filling the remaining space. Then select the line tool to draw a line with the dimensions of 940 by 1 pixel. Here the fill of the layer has been set to a darker color so it gives a nice contrast to the white background. Logo Open your logo in Photoshop and press ctrl and T to resize it to fit in ...

Creating presentations with Reveal.js

Friday, May 6th, 2016 by Servage
reveal-jsFor a long time, PowerPoint has been the de facto standard for creating presentations. A notable alternative to PowerPoint is a JavaScript library called Reveal.js. With Reveal.js you can create beautiful fully-responsive slideshows using tools you are already familiar with: HTML, CSS and JavaScript. The finished slideshows can be viewed directly with any modern web browser or even on a mobile device. Getting started Getting started with Reveal.js is very simple and takes only a minute or two. Go to the official GitHub repository at www.github.com/hakimel/reveal.js and download the latest .zip archive. Extract the archive and run the included index.html with your favorite web browser. You should now have a working Reveal.js demo ...

Web design with Photoshop part 9/10 – Reference clients

Saturday, April 30th, 2016 by Servage
photoshopIn this article you will learn how to add the company logos of your clients as references to potential new customers. Create a new layer group and name it “Clients”. To add each of the client logos, first select the rectangle tool and draw a rectangle in the dimensions of 1400 by 103 pixels. We have kept the background of this rectangle white. Example logos For the example logos we made up four fantasy logos, in your case this should of course reflect your own real clients. Add them to the Photoshop template. Select all the logos and press ctrl and T to transform them. Re-size the logos to a size so they fit ...

Web design with Photoshop part 8/10 – Portfolio video

Friday, April 15th, 2016 by Servage
photoshopIn this article you will learn how to add a video portfolio example on the right side of the portfolio section. Start by drawing a layer showing a video of the team where visitors can click and watch the video. Video box For this, select the rectangle layer and draw a rectangle of 320 by 168 pixels. With the help of the move tool align the rectangle in the center of the second half of the section. Here the fill has been set as #eceff2 so that it can have a different color compared to the background of the section. Name this rectangle layer as “Outer rectangle”. Select the rectangle tool again and create ...

Why your website does not convert – and how to improve it

Thursday, April 7th, 2016 by Servage
conversionYou have probably spent a lot of time and resources in setting up your business in the online world. A nice looking website, maybe even a mobile app to perfectly complement your website and help you turn visitors into loyal customers. But something isn’t working the way it should and it’s keeping your website from reaching its full potential by failing to convert visitors into sales. Here are some useful tips on how to improve your website and fix this problem. Missing functionality, bugs or error pages User expectations have greatly increased in the last few years, so if you want to stay in business you need to keep up with technology, not only ...

Web design trends in 2016

Saturday, April 2nd, 2016 by Servage
trends-2016According to its definition, trends may come and go, especially in an industry as versatile as web design. But thanks to a spiraling increase of mobile device usage across the globe, one thing is definitely not going away anytime soon in terms of web design: Responsiveness. Mobile optimized is a must-have for any 2016 website. Mobile With the mobile ecommerce industry expanding fast and due to the fact that 60% of all Internet searches are performed from a mobile device, it is pretty clear why mobile usage is one of the most important things influencing web design patterns in 2016. Some designers have quickly adopted to this trend and are suggesting to use rather vertical ...

Web design with Photoshop part 7/10 – Portfolio reference

Tuesday, March 29th, 2016 by Servage
photoshopIn this article we create the left side of the portfolio section. Start by creating another layer group and name it “Portfolio”. Select the rectangle tool and create a rectangle with the dimensions of 1400 by 596 pixels and name this layer  “Background”. Here the fill of the background layer is #f4f7f8. Portfolio quote from customer Select the Line tool and draw a line of 960 pixels by 1 pixel. Use the move tool and place it on the top of the portfolio section. Press shift and down key 4 times to set a margin of 40 pixels in between the horizontal line and top of this section. Select the line tool and draw a ...