Web Design

Web design could, arguably, be under the Web & Mobile umbrella, but most true designers are not writing any code at all. They are more likely using apps like Photoshop and Illustrator to create web page layouts, fonts, textures, quirky design elements and images for use as banners, ads, icons, buttons, and featured promotional products. I like using Photoshop and Illustrator for only the parts I can’t code, or look better from a design perspective using jpg, png, or gif. I’ve used them, on occasion, to start a rough design of web pages. However, I think Indesign is more logical as a layout tool. I’ve also used online apps to produce sketches and wireframes. Designing web pages is probably easier to sketch by hand, but each page height is not standard (unless designed that way), and getting a piece of paper to ‘scroll’ is not an option. You either have to stick pages together, draw smaller, or design on a screen.

With my first freelance client, I went through several design iterations, beginning with the manager in Adelaide. I had initially designed the website on a local site with plenty of nice existing images from their server, and requested many more. Content was the key to the new website build. I added minimal parallax effects, sliders, and accordions. A new manager in Victoria recommenced the project after a period of time had passed. He had a preference for a website similar to an industry peer, with all content above the fold. In my opinion, their website design is ordinary. The font is so tiny that the content fits on the screen, and the layout is styled like a table design of the 90's. I researched a lot of industry websites and a lot looked the same, as if only one or two web agencies were involved in the entire industry. I got the point though. The website needed to be easy for clients to find essential information without scrolling through multiple full-width parallax images. In the end result, I had to scrap most of the initial work, leaving just a skeleton of the previous design and of the content. We worked together to get the final result which he was happy with. Some of the iterations are shown in sequential slices below.

Examples of web design iterations for a freelance client

The above six images are slices from the very long homepage with plenty of parallax images as a prompt to get information from the client to fill the sections in between
The above three images are slices from the About page. The client edited some of the written sections, but was happy to keep an image on the page. The end result is a beautiful parallax image from their project image archives.
This is the first draft of one of the service pages. It is still possible to add pdf files or images to the side of the main content. However, we decided to concentrate on key information and a single image for each service
View the website