Print workflow versus web workflow
In an ideal world, print design would retain an important pride of place forever. However, the reality is that in many parts of the world, people are finding their information and entertainment on the Web. If the audience is on the Web, designers will need to move with the times and follow suit. Making a smooth transition from paper to screen can be challenging, but that's where Muse joins the party.
Muse allows you to create websites in a similar fashion to how you create print layouts. It is aimed squarely at graphic designers and newbie designers who want to create eye-catching designs for the Web, but who don't want to learn coding in order to create a website.
In a print workflow, a graphic designer may begin their design with a pencil and paper to create a quick initial mockup. The designer would use Adobe InDesign (or something similar such as Quark Express) to lay out the page, and software such as Illustrator or Photoshop to create and edit images and graphics for the page content. Mixing it all up with a sprinkle of design know-how results in an end product that is a beautiful print creation.
The Web workflow using Muse is comparable to that of the print workflow. Regardless of the medium, it's a good idea to sketch out some ideas before turning on the computer. In five minutes you can have several sketches down on paper. It's highly unlikely you would have the same number of ideas produced in the design software in the same time. That's step one: get your ideas out of your head and onto paper. While the designer in each of us wants to create a visual masterpiece, the number one priority is to meet the needs of the visitors on the site.
Pre-Muse planning
It's important to understand that the effort spent in researching, exploring, and planning at the early stages (before you even double-click on the Muse icon) is vitally important, so that when the time comes to fire up Muse, you'll find the workflow is straightforward and flexible. Many parameters influence how a design layout translates into an effective web design. These include the user environment, the resolution of the user's computer monitor, and to a small extent, their Internet connection speed.
If you've come from a print background, you'll know that part of the fun of designing for paper-based projects is the ability to choose the size and even the shape of your medium. For example, you could choose heavy stock, recycled cardboard, flimsy tissue paper, or a woven finish. Your paper design may include cut-outs, embossing, or folding. The possibilities for your paper graphic designs are many and varied. However, the one thing you can be absolutely sure of when it comes to print design is that whatever size or shape you choose will be exactly the same for everyone who looks at it. If you print on an A4 sheet of paper, we all see that piece of paper the same way. This is not the case for web design, and this is possibly the greatest challenge for web designers.
When we design for the Web, our design is viewed in the browser window. That browser may be sitting on a 28-inch monitor, a 15-inch laptop screen, or a 3-inch mobile phone screen and anything in-between. As you can imagine, this can lead to problems if we don't consider how our site will look in these setups.
There are many web browsers available, the most popular being Firefox, Internet Explorer, Safari, and Google Chrome. Each one of these display the results of the code differently, and as a result each one displays your web page differently. Most of the time, the differences are small, and as web designers we sometimes have to make small compromises to ensure that our designs look great and as similar as possible on any browser. At the time of writing, the statistics from the w3schools.com show the following browser usage:
The data provided by W3C is collected from the W3Schools' log files and should be used as a guide only.
We know that visitors to our site could be using any one of a wide number of browsers to view our web page. The next variable to add to the web design equation is the resolution of their computer monitors or mobile devices. A question frequently asked by web designers is "What screen resolution should we design for?".
To answer this question, it's helpful to know what is the most common screen resolution in use today. Here is the breakdown from last year according to www.w3schools.com. Again, this information is best used as a guide, rather than being set in stone.
We can see from the table that most computer resolutions are now at 1024×768 or higher, so that is the size we should optimize our page for.
Usability expert Jacob Nielsen defines optimizing as ensuring:
"..your page should look and work the best at the most common size. It should still look good and work well at other sizes"
Because many users have a screen resolution higher than 1024x768, most web designers will design their pages so that the content sits in a container that is centered on the page. A centre-aligned layout looks better on larger screens. Web designs tend to look better with an equal amount of white space on each side.
When designing for print, there is generally no limit to the number of graphics or images you can use in the piece. It may cause a certain amount of hassle when e-mailing to the printer because of the file size, but you could put the work onto a CD or DVD and post it.
When it comes to web design, however, we need to think carefully about our use of images. Download speed is vitally important on the Internet and visitors will not wait around for a slow loading website. Google places a value on speed and takes site speed into account in their search rankings (http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html).
Until everyone in the world has a superfast broadband connection, we must always be aware of how fast our pages load. Many users are now accessing websites using cellular data networks, which are much slower than typical Internet connections. One way to increase download speed is to use optimized image files: JPG, GIF, and PNG, which are a compromise between image quality and file size. We'll discuss these file formats in much more detail in a later chapter, but for now it's enough to remember that the speed of our website is a very important factor when planning the design and build of the site, and even has implications for search engine optimization.
So, how do we find out more about who's using what? As mentioned already, the W3C is an Internet organization whose mission is to develop web standards. In addition to providing advice and tutorials on all aspects of web design, they keep track of statistics regarding access and usage. To find out more about browsers, screen resolutions, and the operating systems of web users, check out the following links:
- www.w3schools.com/browsers/browsers_stats.asp: Gives information on browser statistics
- www.w3schools.com/browsers/browsers_display.asp: Offers (reasonably) up-to-date information on screen resolutions
- www.w3schools.com/browsers/browsers_os.asp: Provides a breakdown on operating systems