Servage Magazine

Designers today face immense pressure to be creative and produce out-the-of-box digital products. And so, being restrictive toward particular specialties or skills is a costly attitude for us, as we need to adapt to the changing needs of the industry. Our role expands beyond just caring about the interface. Various Job Titles If you look at the job ads for a web designer, you will find many different titles for a worker in the trade. If a laborer finds they are good at usability testing, compared to other designing and programming work, they will designate themselves as a Usability Web Designer. If user experiences ...

The Canvas API includes functions for creating basic shapes (such as strokeRect() for drawing a rectangular outline and beginPath() for starting a line drawing) and moving things around (such as rotate() and scale()), plus attributes for applying styles (for example, lineWidth, strokeStyle, fillStyle, and font). This example shows the simple smiley face we’ll be creating with the Canvas API. And here is the script that created it. Don’t worry that you don’t know any JavaScript yet. Just skim through the script and pay attention to the little notes. I’ll also describe some of the functions in use at the end. I bet you’ll get the gist of it just fine. <script type="text/javascript"> window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded() ...

  Both GIF and PNG formats allow parts of an image to be transparent, allowing the background color or image to show through. In this section, we’ll take a closer look at transparent graphics, including tips on how to make them. Remember that there are two types of transparency. In binary transparency, pixels are either entirely transparent or entirely opaque, like an on/off switch. Both GIF and PNG files support binary transparency. In alpha (or alpha-channel) transparency, a pixel may be totally transparent, totally opaque, or up to 254 levels of opaqueness in between (a total of 256 opacity levels). Only PNGs support alpha transparency. The advantage of PNGs with alpha transparency is that ...

Web designers are at a critical juncture, going from big to tiny device designs. We need more powerful tools to assist us with the challenge for responsive designing. Adobe Fireworks can meet that challenge. Therefore, I will discuss some of the positive aspects of Fireworks and its impact on our website designing and programming. More often than not, the web design community relies heavily on Photoshop and illustrator for every sort of graphic designing needs, whether it be for small websites or large ones for big businesses. In contrast, the general impression of Fireworks is for managing only small to medium level websites, especially when budget ...

Technically, all you need to create SVG graphics is a text editor (and genius visualization skills, as well as heroic patience!), but you’ll be much happier having a graphics program doing it for you. Fortunately, in Adobe Illustrator, you can choose “SVG (svg)” from the Format menu when saving a drawing and ta da—SVG file! If you don’t have Illustrator, try downloading the Inkscape image editor, which is made specifically for SVG (inkscape.org). It is available for Windows, Mac, and Linux. It takes a little getting used to, but you can’t beat the price (free). Adding SVG to a page An SVG image can be ...

GIF compression GIF compression is “lossless,” which means that no image information is sacrificed in order to compress the indexed image (although some image information may be lost when the RGB image is converted to a limited color palette). It uses a compression scheme (called “LZW” for Lempel-Ziv-Welch) that takes advantage of repetition in data. When it encounters a string of pixels of identical color, it can compress that into one data description. This is why images with large areas of flat color condense better than images with textures. To use an extremely simplified example, when the compression scheme encounters a row of 14 identical blue pixels, it ...

We are living in the age of a tech-savvy generation. Our modern visitors are thus jumping directly to the search feature of an e-commerce storefront, unless they are simply browsing or not clear on what they want to buy. Our complex e-commerce websites are equipped with the latest search functionality and its features. Therefore, I discuss some important aspects of search features and their role in conversion. Designing Search Let’s first think about designing the product search. We need to conceive of two things during designing. First is the placement for the product search. Generally, a search field is placed on the top of the page, ...

So far we have focused on the tried-and-true bitmapped web graphic formats, but there is another up-and-coming option that I’d like you to be familiar with. It’s somewhat misleading to call Scalable Vector Graphics (SVG) “up-and-coming” because the specification has been in development since 1999 and it became a Recommendation in 2003, but thanks to improving browser support, we may finally be able to take advantage of the benefits it has to offer. As I mentioned at the beginning, SVG is a bit of an oddball. Unlike other web image formats, SVG is a vector image format, meaning that it contains instructions for drawing shapes rather than grids of pixels. This makes SVG ...

Keeping a project on track can be a bit tricky at times, so developing some efficient project management techniques helps us to synchronize the steps with clients and the development team. Project management creates a collaborative environment with accountability. I discuss project management here from the project kick-off stage, so we can build trust with our clients from the beginning. Tools for Project Management Most established web development companies use automated software to manage projects. Many employ the latest project management software that is available for free or they pay for a proprietary system. For startups, or a team of freelancers, finding suitable project management software can be ...

There are some useful extensions in Fireworks, which help in the web design workflow. This post introduces one of those extensions and describes how it can be helpful. Manipulating Text Text is an integral part of web design, making up more than 50% of all published content. Typography is considered an inseparable part of graphic design. As text is applied via HTML format, we also need some in image format for buttons, icons, etc. During designing, experienced professionals avoid placeholder text (i.e. Lorem Ipsum...). Instead, we prefer our own, well written, text content so we can get an accurate look and feel of the website. Now, Fireworks ...