The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape.
Wireframes and design elements planning
This is where the visual layout of the website begins to take shape. Using information gathered from the client, we begin designing the layout using a wireframe. We use online tools to aid us in this process and also Pencil and paper are very helpful during this phase.
Mock-ups based on requirements analysis
We design mock-ups in Photoshop allowing for relatively easy modification. The designers keep the design elements organized in layers, as it helps us with the slicing and coding that comes later on.
We create 3-4 designs for a homepage based on different design trends and themes. You can choose which design to be used in your website or web app.
If the website is responsive we provide mock-ups for mobile phone (iPhone 5S) and tablet (iPad) views. All the mock-ups are sent in JPG format
Review and approval cycle
Few cycles of reviewing, tweaking and approving the mock-ups often take place until both the client and us are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
If the client is providing the design
Even though Adobe photoshop is our main web design tool, we are capable of handling all other popular design tools as well. You can send source files in any popular file format used in web design. Below are a list of further information and resources we expect from you at this stage if you are providing the design.
- Site map (including links and a hierarchy of page organization)
- Wireframes (if any)
- All the source files including images, media etc.
- All the linked files
- If you are using commercial fonts it is required to send us desktop and web formats of all fonts.
- If it’s a responsive design provide designs for tablet and mobile layouts
- Include visual designs of links states, popups, dropdowns, etc in source files
- Web design guidelines and style guides
- Licence documents for all third party resources.
Things to consider when you are creating a design
- Name source files properly
- keep the design elements organized in layers
- if you want to use webfonts consider google webfonts first before paid fonts.
- Try to minimize quantity of webfont usage.
- Use photoshop smart objects whenever possible. You can learn more about Photoshop smart objects from here.
- Reduce usage of images and design elements that can be re-created in CSS3 where-ever possible.
Pre-built template or theme
If you have decided to use a pre-built template or a theme for the design of your website, then this is the stage when that theme or template needs to be selected.
When you are selecting a template/theme make sure all required features and components are included in it such as responsive layouts.
Once the design is finalized we move to the next phase in the process which is the development stage.