I want to share with you some of my most used web design resources so hopefully, in this article you’ll find some new things to try that could help out your process a bit. I’ve arranged these into three categories.
We’ve got inspiration, assets and tools. So, let’s get into it first category we’ll tackle, is inspiration now recently on my podcast that I run with my friend femme curve design life which I’ll leave a link to down below. If you haven’t listened to it. Yet we didn’t episode talking about inspiration and how you shouldn’t copy other things or worry too much about what other people are doing, but you can use it to get ideas for yourself and you know remix things to make something new.
So I have a few websites that I go to to look at web design. Inspiration just to see you know what the designers are doing, how they’re pushing the boundaries to give me some ideas of how I could push the boundaries myself. Land book is one of my favorite sites to go to for website inspiration. It’s basically a repository of a bunch of different products, landing pages – that’s very cool – to look at because it means everything is in one place rather than you having to think of a bunch of different products and go and check out the landing pages they’re all right.
There, for you site, inspire, is another good one for that. This one includes more pages of, like you know, people’s portfolios and stuff as well. So there’s a lot of cool animation things that you can find on there. Not all of the designs on site. Inspire relate directly to what I do, but in a way that’s better because it means I can take inspiration from unusual sources. I suppose call to idea it’s a bit of a different inspiration repository because, instead of having a bunch of different pages for you, look at it breaks out different elements within those pages.
So if, for example, you want to look at how other people have designed a signup form, this is a good place to go and do there and just see a bunch of different screen caps of signup forms without getting distracted by the rest of the page. Last up and this inspiration category is coolers, which is this really cute tool that I use for getting inspiration for color palettes. You can just hit the refresh button and keep getting random ones thrown at you or if you come across a color, you like you, can lock it and then reverse seals around it and it will try and develop color palettes for you that match give you some Contrast – and that is a good starting point to work from – I just find it a really good starting point for color palettes, rather than you know, aimlessly clicking around with the color picker tool.
I think this is really useful. The next category is assets, and this one is a short one, because I try and create most assets myself for webpages so, like I won’t use stock photography. Instead, I prefer to take photos myself or hire a photographer and get something more unique. I also like to draw my own illustrations: that’s something I’m definitely going to recommend and this assets category is the noun project.
This is a website full of icons, so different designers submit icons for different nouns in thir name. Some of the icons are in the public domain, so you can use them free of charge. Some are just Creative Commons, so you have to give credit on the page and you can also sign up to their subscription method thing, which means you can use the icons without credit, I’m pretty sure that’s how it works, but mostly, I just find it really useful.
As a way to get ideas of how to draw something, because you can see how bunch of other different people have represented it in an icon, fonts are an asset that I definitely do not create myself. When I design a website for these, I really like actually using Google web fonts they’re. What I use for most of my personal websites that I create there’s a lot on there to look through, and they also give really great instructions for how to use them.
On your site, if you want something a bit more special though then I’m definitely going to recommend the designers. Foundry they’ve got loads about fonts, they’re, really well priced, but because you do have to pay for them. It’s going to mean that your site will look a little bit more unique because it doesn’t have a font that everybody is using because it’s free. The last category is tools and the first tool that I always use when I’m starting a new web design project is a sharpie and a piece of paper.
This is what I use for wire framing I like to draw my wireframes to generate a bunch of different ideas for ways that I could lay out the information. I have done a whole article on wire framing walking through my process on that. So, if you’re interested, we linked on a card and also down below in the description when I do move on to the computer phase, the software that I use is called sketch. I used Photoshop for web design for year, but compared to sketch using Photoshop Web Design.
Is just trying to make the software do something it wasn’t intended to do where a sketch is being designed for web design is amazing for it, and I would highly recommend checking it out if you do design websites. I have been thinking about doing like a introduction to sketch article telling you a few things about it that I learned when I first dive into the program, because it is quite different to using Photoshop, which is what a lot of people do tend to use for.
Web design – I don’t know – let me know if you’d be interested in that down below in the comments sketch has a lot of plugins and one that I definitely recommend downloading is content generator. Basically, it can generate filler text or filler photos for you until you get the real thing so that you can just quickly put them in your design and move on without having to go and search the internet for a random photo to drag in, and I’ve got To a point with the web design, where I want to get feedback on it, the tool that I use then, is called envision.
I think I’ve mentioned this one before in a article. They call this prototyping software. So basically, you upload each page of your design or each stage of it. If it’s like a walk through filling out a form or something, and then you put it in order and you can send the link to someone and they can click through looking at it. In the browser which is actually where they’d see the finished thing, so it’s a really great way to show them, rather than like, attaching a JPEG to an email, for example, which will open in their preview and that’s not where they’ll be seeing a website.
So it’s harder to get an idea of how it’s working and they can also click there on the page and leave a comment, so I find that a really great way to get feedback. Those are all the resources I have to talk about today. I believe to link to them all down below in the description box. If you’ve got any questions about them, then please feel free to leave that down below in the comments. Hopefully, you found this useful and it may be.
One of these things will really help out with your web design process. Please make sure you give this article a thumbs up if you enjoyed it and hit that subscribe button. If you haven’t already make new articles every Tuesday and Saturday, so I will see you the next one hi you