NMFX Creative was recently asked to produce a website for Atmosphere Productions, a new company that launched during the first lockdown. The business had a  minimal holding site that was quickly created when the business was formed but the company now need to develop and establish a web presence so a new web site design was required. In the first part of this series of posts I looked at what the initial requirements for the site were  as well as early content requirements.

in this part, I will look at putting the sites structure together and the process I use as well as the main design elements. One of the early decisions for the client was whether the structure would be a single page design with links to the different sections or whether it would be better to have a more traditional layout with individual pages. Generally, I advise clients that if they want a site they can easily add to with additional sections, or expand the existing ones then they may be better using a multiple page structure, and this is what was decided upon for the Atmosphere Productions Website.

The client's design brief called for a basic site so I created a site structure with just five pages, to begin with. The first page a visitor to the site will see is of course the home page and personally, I prefer my sites to have a home page that reflects the different parts of the website and to offer a taste of what is available on the other pages if they want to go and explore.  Every page of the site will have 3 common areas, the Header, Body and Footer. The header and footer will be the same across every page and only the body content will change. This is a fairly common trend amongst websites. Having the same navigation on each page means a visitor quite quickly knows where to find the page link or footer item they are looking for and makes things more simple to use and build. I wanted there to be persistent navigation so that no matter where someone is on the page the essential parts of the header, i.e. the nav links are always at the top. The easiest way to do this is to make the nav 'Sticky' so that it stays stuck to the top of the page. Making it sticky also changes the Z depth of the header and puts it on top of the other page items so I made  the background of the header opaque so the content disappears rather than transparent as the header on NMFX is

With a site as simple as this one there was little point in developing a wireframe or page mock-ups. It would be quicker to build the site with as much content as the client had available and then put placeholder content where needed. In that way, the full site could be demonstrated to the client rather than having to produce detailed photoshop mock-ups or the client use their imagination. It also made it clear where the areas were that needed more input from the client to finish off.

The client was very keen on a high impact white on black site with colour used to emphasise calls to action or other important site elements. This meant the overall design was going to be clean and fairly minimal. I decided that I would use black blocks with a curved contour on the top and bottom, similar to the new logo, that would 'float' on top of photographic backgrounds. I am a big fan of these parallax effects when they are used carefully and not overdone. I think they look quite stylish while remaining simple and adding a little more dynamism to a design. Many of the design prompts for the site are from the logo, such as the blue emphasis colour and in this way it helps all the elements remain consistent and on-brand.

Having a  thorough understanding of what the client wants is vital for this type of design. If the client changed their mind about the look, feel or style of the site at this point would require many hours of reworking and redesign. Instead being confident about what the client wanted allowed me to deliver a more finished site quickly and with less work involved in development. If I had not been as confidant in the design then something that could be iterative and easily rolled back and changed would have been called for and development would have taken longer with more of the clients time needed as they reviewed each stage, gave their input etc. The website is for many businesses their virtual storefront, interactive brochure, etc and as much effort and thought as goes into a physical location should be given to the website and its design and content.

.In the next post I will look at content  management, optimising the site for search engines and setting up analysis so the owner can see metrics about  the sites use.