Below are some of the projects I have been working on with a brief description of the techniques used and the final results. Some are large projects carried out over a series of months, whilst others are projects completed in an afternoon.
If you have a project in mind, I would love to hear from you to see if we can work together.
2020-04-25
I often receive a photoshop or XD file that a designer needs to be converted into HTML. The complicated part is often translating that into a responsive design.
Sometimes the designer will submit one file to render the visualization on a computer, and another layout to render it on a mobile device.
Since there are infinite screen sizes, these sketches serve as a starting point to start programming the structure of the page. My task is to program a design that adapts to all screen sizes whilst remaining faithful to the original design.
In the example presented here, we see that the client wants a “landing page” type page that presents few complications. What is immediately obvious is that the design uses a fairly small font size in some areas, which will be impossible to read on the screen.
The first thing to do is think about how to separate the various elements of the design. I take the design in Photoshop, and start dividing it into sections. Then I think about how those sections will be organized in the mobile format.
The next step is to start translating the sections I've marked in Photoshop into HTML code and CSS elements. Starting from the outside in, I create each section, and then fill it with its sub-sections until I get to the content elements.
Once all the text is in place, I adjust the font size and colors to match the layout without using fixed sizes; the important thing is to maintain the proportions between headings and paragraphs.
The next step is to add the graphic elements to the design. These can be vectors, photographs, icons, etc. We integrate them into the raw code, and then program their features according to the delivered design.
Finally animation and interactivity is added to complete the design.
