I've just finished working through the initial design for the twitMate website and I thought I'd share my process. I'm a developer first, so this probably isn't best practice and I'm open to feedback on how I could go about things better.
My starting point is a logo which has already been decided on. I sketch everything using Adobe - I have an old copy of CS6 which I've been using for years so am very familiar with.
I try out a range of colours first and discard lots of these to settle on a rough palette. I then try small variations on the palette to get an exact shade for each colour.
For text and background combinations, I check the colours for accessibility, especially for paragraph text which will be less bold. I record the hex codes for the final colours to use easily later.
I test with large text, medium text and paragraph text, and bold/regular options and record each font size in pixels so I can use it later.
I try to keep the number of fonts to a minimum so that the site will be faster.
I try to keep lines mostly straight because it will make the development quicker/simpler - however a few simple curves can add a bit of flare and are OK to work with as long as they aren't too complex.
I try to keep effects and use of JavaScript to a minimum to keep the page as light as possible. This also means the sketch should be very similar to the actual site.
Starting with header and footer I try to think about how users are going to navigate and how I can draw attention to the places I want visitors to focus.
Below the header and above the fold I try to focus on getting the message across - I want people to know what the site offers inside a second. Text here is also important for SEO so I bear this in mind.
I used to love using a hero image but now speed is such an important factor in sites that I try to avoid it.
I aim for images will look good but just be a few kB, so that the page loads fast. I got the icons for this sketch at The Noun Project.
Here is the completed design: