our ideas about web design
At Sunny Side Up we are passionate about web design. Below, we answer some commonly asked questions.
Introducing our way of working
View more presentations from Sunny Side Up.
what is so smashing about Sunny Side Up?
Sunny Side Up website development services stand out because:
- we bridge the gap between technology and business requirements by helping you integrate your website into your overall business strategy.
- we use a collaborative approach to development - involving you in every step.
- we charge less by keeping overheads low.
- we make websites that are easy to maintain.
- we showcase original design that stands out (no clip-art or standard templates found here).
- we make search-engine-friendly websites.
- we dont lock you in - you can freely switch web development companies if you are unhappy.
- we use cutting edge coding techniques and build sites that conform to best practices and standards.
- we have a world of experience (see our portfolio).
what is the key to quality web design?
The most important thing about a commercial website is that it forms a meaningful part of your marketing mix.
That is, your website helps you achieve your overall goals; just like a business card or a brochure, it has a role within the business.
Important questions include: what are we trying to achieve?
, what image do we want to portray?
how do we want to come across?
, and how can a website make our business more efficient?
.
what are some of the typical steps in developing a website?
Below is a list of milestones that you may include in planning a website project. Each one of these counts, however, the first few are crucial in getting it right. Every dollar spent in the earlier parts of the project will save you ten dollars later. Ask yourself some hard questions and you will get the best results.
- what is the goal of the website? what do we have in place already? is it about increasing efficiency, improving our brand value, or adding a sales channel?
- what designer is best suited to your project? what look and feel do we need? who can deliver this look and feel?
- what is the most suitable structure for our website? what are best practices in web design?
- who will provide content for the website? who will maintain the website? how much do we know about web technology?
Once the above questions have been answered - you will formalise this information in a design brief. This document will be provided to the design team and to the person(s) doing the technical work for the website. From there, the technical team will setup URLs (i.e. website addresses such as www.mywebsite.com or www.cookingforprofessionals.co.nz), webhosting and start with the technical work. Meanwhile, the design team will complete their task of making visuals for the website. At the same time, you - as the website owner - will need to source the content (images, copy, etc.). You may consider hiring a photographer and/or copywriter, but only you can make the final decision on what should be included on your website.
Once completed, the technical person will combine the design with your content, merging these into the application they have created.
Finally, the website is ready for viewing. It should undergo rigourous testing (preferably by a third party or actual users) before it is unleashed into cyberspace.
what software should I use to browse the internet?
One of the best things you can ever do on your computer is to install Firefox. Firefox is a web browser that, in many ways, is superior to Microsoft Internet Explorer, most notably because it will show you websites the way their designers intended them.
I want to be number one with Google - how do I achieve this?
First of all, there are no silver bullets. And, lets face it, who doesn't want to be number one at Google? The crucial question is - for what keywords do you want to be number one? This requires research. What do your prospective clients search for on the internet? Do they use Google at all? Once you have answered these sorts of questions then we can help you raise your profile on Google and other search engines. The best way to do this - by far - is to have a large number of popular websites linking to your website using your selected keywords. Please read the Google Bomb article on wikipedia for some background information.
what are some of the best practices in website design?
There are many ways to look at a website. You may consider navigation, usability, accessibility, design and information, among others. Best practices listed here relate to the idea that websites should be built so that several people can work on them at the same time, making it a collaborative process of best practices in all of those areas rather than a compromise between these professions. To achieve this, websites should firstly conform with standards set by the w3 organisation. Not that we are so keen on rules, but because this makes it easier for people to work together. Futhermore, websites should be built in such a way that they separate content from design from interaction and so on.
what is the difference between print and web design?
Most designers come from a print background and making the step to web design can seem deceivingly simple. Print is all about full control. In contrast, designing for the web is all about fluidity and creating flexibility. There are two reasons for this. Firstly, websites are (and should be) constantly updated. Secondly, you can not control the tool used to view the website. That is, view devices are as diverse as the latest i-book, a black and white laser printer, a tiny old monitor, a television and even a mobile phone. Thus, reducing control is the first step. This is just the begin. Every web designer should ask her or himself questions like:
- how do people read screens?
- how do people operate their mouse and keyboard while browsing the web?
- what interactivity can be added to the website to make it more user-friendly?
- how do people search for information on the web?
- etc...
graphic design for web - some recommendations
- Dpi (dots per inch) is nonsensical for the web. Pixels and percentages are the measurements of choice for any website. Note that, in web design, you can use percentages (relative) rather than absolute numbers (e.g. the menu is 20% of the total screen width or each column of this table will be 20% of the total width).
-
In most cases, websites have set widths and fluid heights.
As more people are accessing the web from their PDAs, laptop and mobile phones, it pays to limit the width of your website.
The maximum width is either:
- 770px (this will fit on a 600x800 screen) or
- 996 pixels (this will fit on a 1024x768 screen).
- Fonts can not be controlled on the web. You can only make recommendations for font-types and sizes, the user can overrule these rules and regularly do. Besides, font-sizes and font types differ per computer so the same font will be displayed differently on various machines. Also, don't design using fancy fonts in parts of the website that are regularly updated.
- Design with change in mind. For example, what happens if a new menu item is added? What happens if more text is added? Websites are living creatures and should be designed to allow for change. Think flexible!
- For coders, design files are best delivered as photoshop files. Bear in mind that the coders my not always have the same version of Photoshop. Any other format is likely to reduce the quality of the website.
- Websites bleed. That is, websites do not stop at the edge of the designed space. If the users viewport (what they can see of your website) is larger than the width or height of your design then what happens? Will the background colour continue? How will the website be aligned (center, left or right)? And so on.
- Websites don't have to be static. They can be interactive (e.g. if you click on the image, a message appears OR if you click on the button a contact form appears). In designing for interactivity, it is a good idea to break up the various parts, provide these as separate files as well as one file, describing the relation between the webpage elements.
-
Website design can be broken up into two parts: layout and typography. Layout is the structure of the website (menu on the left, image on the right, etc.).
Typography relates to fonts.
Usually, you need to design styles for the following elements:
- Paragraph
- Heading 1 up to heading 6 (heading 1 being the main heading, heading 2 being a secondary (sub) heading, and so on. Just like a book has a main heading at the start of each chapter and subheadings for each part of the chapter)
- List (bulleted as well as numbered): you are currently reading a list with default formatting, except for the bullets which have been specifically selected for this website
- Linked text. For example, when you have a paragraph and part of it links to another website, then the text is usually blue and underlined. You can choose this to be yellow and bold or whatever, the key is that it needs to be defined. As part of this, you can specify various states. These are: links not yet followed (unvisited), links that have been followed (visited), hover states (when the mouse moves over the link), active links (when the link has been clicked, but the new page has not been loaded yet)
- Table headings and cells
- Address blocks
- Superscripts (e.g. as in 11th) and subscripts (e.g. as in 02)
- Links to specific types of documents (e.g. pdf links) or locations (e.g. outside the current website)
- Definition lists (e.g. glossary type copy)
- For each element, you can consider the following formatting recommendations (among others): font colour, surrounding white space (e.g. white space before a new heading), font-size, font type (you can specify several in order of preference - e.g. arial, Helvetica - sans-serif)

















