25 gratis en geweldige webdesigner programma’s

25 gratis en geweldige webdesigner programma’s

Wanneer je een design begint zijn de eenvoudigste materialen het beste: pen en papier. Zodra je eerste ontwerp is voltooid heb je echter een aantal uitstekende technische hulpmiddelen nodig om het tot leven te brengen. Als een webdesigner rommel je dagelijks met elk aspect tot het project precies past bij het plaatje in je hoofd. De sprong van papier naar pixels kan ontmoedigend lijken, dus hier zijn 25 gratis en geweldige webdesign programma’s.

Like ons op Facebook
 

Ik gebruik Photoshop en Illustrator dagelijks. Photoshop was van oorsprong geen webdesign programma, het is beeldbewerkingssoftware gemaakt om afbeeldingen aan te passen, te bewerken en te manipuleren. Er zijn twee dingen op te merken als je Photoshop gebruikt voor webdesign; ten eerste is de interface niet het meest gebruikersvriendelijk en er is zeker sprake van een leercurve, ten tweede moet je leren hoe je Photoshop gebruikt voor webdesign.


Voor prototypes van complexe user interfaces (UI) gebruik ik After Effect. Het is een zeer handige methode om ideeën aan je klanten te laten zien en te communiceren naar de front-end developer. Nogmaals, After Effect is geen standaard webdesign programma. Illustrator, After Effect en Photoshop zijn alle drie Adobe producten. Het voordeel hiervan is dat zodra je er eentje onder de knie hebt, het begrijpen van de anderen als een fluitje van een cent gaat. Het is dus vrij simpel om de sprong te maken van Photoshop naar Illustrator en After Effect.

Gratis geweldige webdesign programma’s

Webdesign is meer dan enkel rommelen met Adobe software. Het moderne webdesign gaat over webfonts, kleurenschema’s, afbeeldingen, iconen, knoppen, semantische HTML, JS, CSS en bruikbaarheid. Gelukkig lijkt er een onbeperkte bron aan software en speelgoed te bestaan, zowel online als offline. Sommige hiervan zijn simpele programma’s die je in je browser kunt gebruiken. Hier deel ik een aantal geweldige programma’s zodat je kan ontdekken welke het beste bij jouw behoeften past.

1. Frontify styleguide - prototyping

Create your web-based style guide within minutes. It's free & easy. Start from scratch or use style guide templates.


Click here to visit

2. Craft, a Photoshop and Skecth plugin - prototyping

Craft is a suite of plugins for Photoshop and Sketch that help streamline your design workflow by automating tedious actions and pulling in more realistic sample data.


Click here to visit

3. Sketchpacks, a Sketch.app plugin - prototyping

Sketchpacks is an unofficial plugin registry and directory for Sketch software by Bohemian Coding.


Click here to visit

4. UX Check - chrome extension

UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.


Click here to visit

5. Whatfont - chrome extension

With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant. It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.


Click here to visit

6. Page Ruler - chrome extension

Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.


Click here to visit

7. Resizer - Google Responsive layout check

An interactive viewer to see and test how digital products respond to material design breakpoints across desktop, mobile, and tablet.


Click here to visit

8. Eye Dropper - chrome extension

You can pick any color on current webpage and store it in history or copy to clipboard. Every picked color is stored into history when you can find it in future.


Click here to visit

9. CodePen - Development

CodePen is great for testing out bugs, collaborating, and finding new inspiration. It works by allowing you to create “pens”, which are sets of HTML, CSS, and JavaScript. You can then display those pens on your profile, take feedback, and continue to edit those pens at any time.


Click here to visit

10. Animate.css - Development

It is a ready-to-use library collection of CSS3 animation effects. This library supplies you with over 50 different animation effects which work consistently on most all browsers with CSS3 support.


Click here to visit

11. WOW js - Development

A very friend of animate.css. Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.


Click here to visit

12. GridGuide - Development

A tool to help you create pixel perfect grids within your designs. Enter your requirements above and we’ll will show you all of the whole pixel combinations you can use.


Click here to visit

13. TinyPNG - Development

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG and JPG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!


Click here to visit

14. Google fonts - Typography

The open source fonts in the Google Fonts catalog are published under licenses that allow you to use them on any website, whether it’s commercial or personal.


Click here to visit

15. Font Squirrel - Typography

Font Squirrel scours the internet for high quality, legitimately free fonts . Download thousands of completely legal, high quality, free fonts.


Click here to visit

16. Canva Font Combinations - Typography

Typography made easy. Find a font combination for your design needs.


Click here to visit

17. Typewolf - Typography

Typewolf helps designers choose the perfect font combination for their next design project—features web fonts in the wild, font recommendations and learning how to use them.


Click here to visit

18. Type Anything - Typography

Type Anything is a free and awesome typography tool to create and test font combinations for your projects.


Click here to visit

19. Iconjar - Icon

Organize, search and use icons the easy way. Iconjar gives you the ability to store all your icons in one place, just one click away.


Click here to visit

20. Font Awesome - Icon

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy.


Click here to visit

21. Colordrop - color

A collection of great looking color paletters. Compare colors on different backgrounds, save your favorites.


Click here to visit

22. Impalette - color

Impalette scans your image for nearest, matching Pantone colors and maps the 10 most common to a palette and secondary, tertiary, and opposite colors for the palette based on your parameters.


Click here to visit

23. Coolors - color

The super fast color schemes generator! As you begin to notice recurring themes or colors, play with one color until it reflects the hue that you’re looking for. Create, save and share perfect palettes in seconds!


Click here to visit

24. Unsplash - Free images

Unsplash. Free (do whatever you want) high-resolution photos.


Click here to visit

25. Pexels - Free video

Pexels Videos offers completely free videos. under is the one I like.


Click here to visit