How I design, as a developer

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.

1. From the logo I work out a colour scheme for the site. I focus on background colours and text colours and then add one or two accent colours.

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.

2. I try a bunch of fonts that are available on Google Fonts or Font Squirrel with an open source license. I see how they look with placeholder text in the chosen colours.

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.

3. I tend to develop desktop first, so I make a full page sketch of the homepage in desktop mode.

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.

4. 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.

5. 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.

6. For the main content layout I add a mix of placeholder text and images/icons, making sure to use the full range of text sizes, colours and variations. This will vary from page to page and over time so I try not to get too bogged down on the exact content at this point.

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.

7. Depending on the level of detail I want to go into I will repeat this process for mobile and tablet breakpoints. However, I am also aware that I could spend far too long on this so for side projects like this I will move on to the development once I have a desktop version to work from.

Here is the completed design: