That’s what the life of a front-end web developer often entails, so how exactly do they connect with each other? I’ll start with the process esteemed graphic designer, Aaron Draplin, uses to design logos because the following principles translate well.
First, pen and paper for the basic concepts.
This process consists of drawing out simple concepts of sections you’d like to see on the site. Content and coloring aren’t necessarily concerned yet. Experimentation is essential, because this is the part of the process during which items can be created and scrapped with ease. The reason to start on paper rather than with software is that at this stage there is a tendency to design uninspired sections that don’t push the boundaries of design or apply aspects of the company’s design principles creatively when working digitally.
Secondly, we get this in a digital format.
Depending on who you ask, this could mean going straight to code or creating mockups with software like Sketch. Either way, gradually add color and dummy content. The site will start to come together at this point, but don’t shy away from experimentation still. To experiment efficiently, create copies of sections and try to do something different with each copy. Always keep in mind who or what this is being designed for and what they represent. Introducing a framework such as Bootstrap would also be appropriate at this step.
Lastly, make sure that your color, content, and brand message are all in sync.
Ensure that your work will be viewable by many users as possible through the use of browser-compatible code and mobile-friendly design. You can check the compatibility of your HTML and CSS code by heading over to Can I Use. Utilize text elements that are able to contrast off of the background whether it’s an image or solid color. You can even grab high quality, free for commercial use stock images from Pexels or Pixabay.
Now you can step back and ask yourself the question: is the final product something that is in line with what the client represents or builds upon the current design? If the answer is yes, then you’ve been successful.