Design Questions
- So how does the web design process work
1. Determining your requirements.
We need to establish what you and your company requires from the new website. We will need some background information on your business such as your products and services, target audience and so on. Using this information we can then provide an accurate quote.
2. Agreement of proposal
We can now create for you a proposal based on the requirements provided to us, this is a basic outline of your site structure and the costs involved. Once this is agreed we require a small deposit to signal your acceptance in order to proceed with a design from x3 Internet Solutions.
3. Your personal Designer
At this stage x3 Internet Solutions will assign one of our designers to you, this means that you have a personal contact name and you will not be repeating yourself to many different people. The designer will work with you and for you, via email and telephone if required.
4. Collection of design information
We now require as much information from yourselves as possible on how you wish your website to look and work. Your company logo if we are not designing this for you, any printed materials you have for your business (flyers, business stationery etc) and if possible your website content (even if this is just a rough draft at this point). If you have seen any websites that you like the look or feel of then send us a link explaining what it is you like and what you do not like - this will all help us to determine what it is you require for YOUR company.
5. Initial site mockups
This is where the fun begins – x3 Internet Solutions will create some initial mockups for your new website for you to critique. Your feedback is essential for us to develop a website that is exactly how you envisaged it.
6. Establishing the look of your website
Based on your feedback from the mockups we will complete a working design ready for use throughout your website - once approved we are ready for inserting the final content.
7. Optimisation of images and content
During this phase we work on any images that you wish to use on your website - reducing them in size and optimising them for best visibility with the smallest file size (and therefore faster download). We will also proof read your website text and make suggestions on how to optimise it for best search engine placement
8. Final proof reading and testing
Now your website is almost ready, just one last step to go. We endeavour to ensure that there are no mistakes on your website - but we request that you do a final proof read of the site and test that it is all working to your satisfaction prior to going live.
9. Your brand new website goes 'live'
Your site is published for the world to see, it is now ready for you to start advertising it to drive visitors to the site - swap links with other websites, tell your friends and add your web address to your print materials. We will submit your URL to Google and some other search engines. We will also provide you with information on a range of other free search engines and directories.
10. How long does it all take?
This all depends on the specifications of the job in hand. A basic brochure website or personal site could be up and running in a week (urgent jobs can generally be catered for but we would need to be contacted to confirm availability). E-commerce sites generally take a couple of weeks, depending on which e-commerce plan you decided on and what your requirements are. Timescales can be confirmed with us prior to work being carried out. - Images: Colour Size and Resolution
A quick guide to understanding and preparing graphics.
Two of the most common problems we encounter as a Internet developers are low resolution and improperly formatted images. Frequently we will request a "high-resolution" version of a client’s logo and, instead, we receive a small blurry graphic. By reading this article, we hope you will have a better understanding of how and why images for the Web should be prepared to certain specifications.
Images must be optimized if they are to appear sharp and clear in their respective media. And each medium (print, Web, or CD-ROM) has its own requirements. By optimizing each file as to colour palette, resolution, and file size, we are able to keep the art looking its best in each situation.
Colour
Two basic colour formats are used in media production. CMYK is used for print media, including textbooks, magazines, brochures, and newspapers. CMYK stands for Cyan, Magenta, Yellow, and Black, which are the four colours used to create most colour publications. Every colour photo or graphic you see in a magazine, for example, is actually composed of some combination of these four colours.
The other colour process we should be aware of is RGB. RGB stands for the three-colour process consisting of Red, Green and Blue. RGB is most commonly used for computer and television graphics. Examples include CD-ROMs, motion pictures, computer-aided design, and the Internet.
Resolution
The next thing to know about image preparation is resolution. When preparing images, it’s essential to consider where they will be used. Resolution is most commonly measured in DPI (dots per inch). Screen graphics (such as graphics for computers) are usually created at 72 or 96 DPI. Print graphics on the other hand tend to vary. 300 DPI is a common minimum resolution, though some publications may require as high as 2500 DPI or more. Larger prints (such as graphics created for tradeshow booths or billboards) may have special requirements, as they are created for viewing from a vastly different distance.
It's important to note that, if you are preparing graphics for someone, or are requesting graphics for someone else, and you are not sure whether the graphics will need to be optimized for the screen or for print, always choose the higher resolution. It’s always possible to take a large graphic and successfully reduce it, but when you try to increase the size of a small image, you are beginning with fewer pixels with which to fill a larger amount of space. Thus the image becomes distorted as it attempts to compensate for the missing pixels.
Size
Size should never be confused with resolution. Think of resolution (or dpi) as an image's density. Think of it as though you were to look at an image and count the number of pixels in exactly one square inch. Size, on the other hand, is how big the image appears to us visually. A higher resolution will allow us to display with greater detail. A larger size may allow for something to be seen better from a greater distance.
Size on a computer screen is always measured in pixels, as width and height. Width is how many pixels across, while height is the number of pixels top to bottom. If a display is set to show the viewer 72 dots (pixels) per inch, an image measuring 72 pixels wide by 72 pixels high will display as exactly one inch across and one inch tall. However, if the display is set to show the viewer 96 dpi, that same 72 pixel square image will appear something less that an inch square on the 72 dpi display. Conversely, if an image was created at 300 dpi, and is intended to print at 1 inch wide on a 300 dpi printing device, on a 72 dpi computer display it will appear to be more than four inches across!
Although height and width are also the basis of measuring things for print pieces, when measuring for print we employ units such as inches or centimeters instead of pixels.
Now we've covered the basic attributes of an image:
Colour: RGB or CMYK Resolution: measured in dots per square inch (dpi) Size:measured as height/width in centimeters, inches, picas, points, or other type of unit - Images: Formats and Preparation?
What are some of the image formats and why would you choose one over another?
The number of image formats available for saving an image are almost as many as the number of programs there are to save them with. Still, there are a few image formats which may be considered "industry standard" or which are common to say the least. Some of these formats, with their file name extensions, are:
.PSD – Photoshop document
.AI – Adobe Illustrator document
.EPS – Encapsulated Postscript file
.TIF – Tiff file
.TGA – Targa file
.BMP – Bitmap image
.GIF – CompuServe Gif image
.JPG – JPEG image
Some of these file formats include information that is more detailed than other formats, which may allow them to be more easily updated in the future. Among all image formats there are two basic types, those which are composed of pixels and those which are composed of vectors (or mathematically described lines and shapes).
PIXEL-BASED PROGRAMS
Pixel based images appear distorted when enlarged because they are composed of a series of dots called pixel s. Therefore, if you take an image that is 100 pixels by 100 pixels square and blow it up to 1000 by 1000 pixels, the new pixels must be extrapolated — guessed at. The results are never ideal, and often are disastrous. In the worst cases, the image suffers obviously from a bad case of "the jaggies."
VECTOR BASED PROGRAMS
Contrary to pixel-based images, vector images are created by mathematical formulas and generally comprise geometric shapes. Vector-based images are ideal for such graphics as logos or text. The advantages of vector art include dramatically smaller files sizes and the ability to very easily make changes. Vector images may be blown up to 12,000% of their original size without any distortion. Were you to do the same with a pixel-based image you would most likely not even be able to tell what the original image ever looked like.
How does vector art work? Lets say you were to make a red square in a vector-based program. Instead of recording the position and colour of hundreds, thousands, or even millions of pixels in the image, a vector-based program would instead create a formula for the image which would record a shape with four sides, while mathematically describing the corners and the colour.
PIXEL vs. VECTOR
So, that's pixel vs. vector. Which is better? It depends. If you're working with photographs or images with a lot of depth, pixel-based programs tend to be better. If you're designing something out of geometric shapes (logos, line drawings, or text, for example) vector tends to be better. That's not to say that you can't design something in one program and then bring it into another. You can always take a vector image and make it pixel-based, but you can't very well adapt pixel-based images to vector-based programs. Some programs will allow you to use pixel-based images as placeholders and may even allow you to convert the image to a series of vector shapes, but you never will have the same amount of depth or detail you would have had were you to create the design with a pixel-based program in the first place.
.PSD
Adobe developed this format for its Photoshop application, which has become the industry standard for the design of pixel-based images. Advantages of Photoshop are that you can create your art in different layers, which vastly simplifies the task of editing individual portions of a composition. File sizes are usually fairly large though Photoshop offers the ability to save images in any resolution, colour, or size. P The main disadvantage is that you need to have Photoshop on your computer in order to be able to read Photoshop files in their native format (although Photoshop enables you to read many other types of file formats). Photoshop also has a steep learning curve and is expensive. Nonetheless, .PSD files are preferred by many designers because they are by far the most versatile (provided they are not flattened, that is, as long as the individual layers are kept separate from each other.
.AI
Illustrator is Adobe's answer to the vector graphics creation. Though not as well established as .PSD's, .AI is a good format to use because it can save numerous layers in addition to being able to preserve vector shapes in their native format. Illustrator is used for both creating and editing .AI files though its strength is its ability to save files in .EPS format. (Illustrator can also export .AI files into various pixel-based formats.)
.EPS
.EPS (or Encapsulated Postscript) files offer us tremendous usability in the multimedia industry. Within a single .EPS files, one can include vectors, bitmaps, and text. It is the preferred file format of print professionals.
.TIF
Tiff files are renowned for how well they preserve the details of pixel-based images such as photographs or collages. Their quality level is high and they offer the added bonus of being a file format which transfers well from PC to Mac and back again..TGA
Targa files also are known for their exceptional cross-platform compatibility though they are most commonly used for images in video and are generally not used in print design. An added bonus of the Targa file is its ability to save a third layer which may be used as a mask to show only part of an image at a time. Assuming that the image size is correct, Targas are the best files to send a video technician..BMP
Commonly referred to as Windows bitmap, .BMP is not a very common format used by designers but it?s a good file format to send to people who are using Windows-based machines. The reason for this is that Windows comes with its own image manipulation program called Paint which would allow any Windows user to open a .BMP..GIF
The .GIF format was actually developed by once dominant CompuServe. A company which has been around since the beginnings of the Internet?s popularity, CompuServe fought hard to maintain a patent on their compression scheme and eventually lost. Nonetheless, .GIF files today are one of the two most popular image formats on the Web. It is a lossy compression format, which means that when you save a file as a .GIF there is usually some information from the original image which is left out. As a result the .GIF file format provides some of the smaller file sizes thus making a good format for the Web. After all, the smaller the file size the faster the image will download. Another advantage of using .GIFs is their ability to preserve transparency and then utilize this on a Web page. And of course we mustn't leave out its ability to save an animation sequence..JPG
Last but not least is JPEG. JPEG files are also a Web favorite because they too have the gift of small file sizes. Like the .GIF, the .JPG is a lossy format which will sacrifice detail in order to prevail a smaller file size. However, where the .GIF is good for images with solid colour like logos, JPEG files are better at compressing photographs for Web use. Neither is ideal for a sharp print image, but both make for short download times when properly compressed for the Web.In conclusion, there are all sorts of different file formats available to us and some are better for print while others may be better for video or the Web. Finding the right format for the job is key, and our hope with this article is to help you to do that better. After all, great imagery isn't worth anything if you can?t see it at its best.
- What is the difference between GIF and JPG? Which should I use?
A lot of people designing graphics for the Web aren't sure whether they should use the GIF or JPEG image format for their graphics, and aren?t even sure just what they are. Here?s a quick rundown.JPEG and GIF are the two chiefly used image formats on the Web today. Just as there are Word documents and Excel documents, each offering a specific advantage, the same is true of GIF and JPEG files.
JPEG files tend to be best for things like photographs and other images with gradients of colour. Due to the way a JPEG is compressed, JPEGs tend not to do hardline art well.
GIF files, however, tend to be better for flat-style illustrations, with large areas of continuous colour. Things like logos and text treatments hold up well as GIFs because there is no blurring of the edges. The files remain sharp and well defined. Another feature that the GIF format offers is transparent backgrounds which allow you to see the background of a Web page. And finally, there is the option of animation. The most common application of Gif animation is banner ads.Overall, GIF files tend to be smaller than JPEGs when used properly.
So, which are better GIFs or JPEGs? That depends, what are you going to use them for?
- Acronyms & Jargons, What are they?
Ever wondered what all those acronyms and jargon actually mean?
ADSL: Asymmetric Digital Subscriber Line A new technology that allows more data to be sent via phone lines to your computer. (500+kbps)
ASP: Active Server Pages The language of dynamic web pages found on Windows Servers
BROWSER: (Short for Web Browser) Software used to display web pages (eg:Internet Explorer or Netscape)
FLASH: (Macromedia) A programme used to create animations
GIF: Graphics Interchange Format A type of image that has been condensed for web use
HTML: Hyper Text Markup Language The main language used to create pages on the world wide web
ISDN: Integrated Services Digital Network A technology that allows increased data to be sent via phone lines to your computer. (128kbps)
ISP: Internet Service Provider A company that provides access to the internet
JPEG: Joint Photographic Experts Group A type of image that has been condensed for web use
Kbps: KiloBits Per Second A measure of the speed with which data can be transmitted from one device to another
URL: Uniform Resource Locator The global address of documents