We spent a lot of time over the past couple of weeks working with students in the Graphic Arts shop to practice our design skills. Graphic design is a way to visually communicate with a particular audience. Some examples include ads, logos, book covers, product packaging, brochures, posters, mail pieces, and yes, websites.
You designed for both print and the web and understand there is a difference between how things look on a computer screen and how things look printed out on a piece of paper. Generally speaking, you print at a much higher resolution than what is posted online.
Many graphic design principles will apply whether designing a product for print or for viewing on a computer screen- “Make it easy on the eyes but hard to ignore!”
For example: Text that’s easy to read and consistent in size/appearance; Use of white (open) space; A clear focal point of the design; and colors that don’t clash!
When designing a webpage, you will use text, images, and graphics to convey your message and content to your audience. Some webpages might use more graphics and images while others are more text-based. Other webpages try to create a balance between graphics/images and text.
Examples of Well-Designed and Creative Webpages
Remember: 95% of the web is written information. Users rely on you to design your webpage so it’s easy to navigate and easy to understand. Text and graphics/images help organize your content and let users know where they should go and what they should pay attention to.
A great example of a website that has a very simple design that basically only uses text: Google.com.
Very creative and different designs
Adobe Products
Starting today we will be using Adobe CS4 Web Premium. This has been installed on your laptops so you can practice using some of the programs. The latest version of Web Premium is 5.5 so the links to these programs will be a little different but much of the content is still the same.
In the Graphics shop you used Adobe InDesign, which is often used to develop print materials. In our class we will focus more on products used in web design, such as Photoshop, Fireworks, Dreamweaver, and Illustrator, which can also be used for the development of print materials. Graphics students also learn how to use Photoshop and Illustrator in their print projects.
Disclaimer- this is not a promo to convince you to buy expensive Adobe software! I want you to be aware of what’s out there and what it’s used for. Our class mainly focuses on what is free and widely available online for you to use to develop great websites. You don’t need a bunch of fancy, expensive programs and many, many cool things are possible for web design using just Notepad, Firefox (or any other good browser) and the thousands of free tools and applications available for free online.
You have the following programs installed on your laptop (among some others):
Adobe Photoshop CS4
This program is very powerful. It’s used mainly for image editing and you can also create basic animations. I use this all the time to color correct photos, crop them, resize them, remove red eyes and other imperfections, and to optimize photos for the web (save for web) so they are low-res enough to load quickly on a webpage.
Adobe Acrobat 9 Pro
This can be used to create and edit PDF’s. Sometimes you have no choice but to post a document online as a PDF to make sure everyone will be able to download it. Also, making a document a PDF makes it harder for someone to edit it- for example, if you are sending a bill to a client with important information, if you send it as a PDF it’s much harder for that person to open it and change it than if you send it as a Word Document.
Adobe Dreamweaver CS4
This is used to create webpages. It’s great for people who are very design-oriented and who might not know much HTML or CSS or know any code at all. I’ve found that the code it creates is not exactly what I would do and I’m wary of the program. I personally don’t prefer to use it but it’s up to the individual designer.
Adobe Fireworks CS4
I use this all the time for graphic design for developing online ads, logos, banners, etc. It can also be used for developing CSS-based webpages. Fireworks operates in conjunction with Photoshop and Dreamweaver and other Adobe products to create very nice-looking webpages, even for people who don’t know much code. You can also use Fireworks to create basic animations.
Adobe Flash CS4 Professional
Flash is used to create animations and Flash-based webpages. Flash is great in small doses. We’ve seen examples of bad websites that just hit you over the head with Flash while you sit helplessly waiting for the webpage to load. You don’t want to do this, especially since more people are viewing web content on mobile devices and HTML5 and CSS3 are emerging as the friendly alternative for displaying animation and video online.
Adobe Illustrator CS4
Some of you might have used this program upstairs. You can “draw” in it and create nice illustrations that can be used on your webpage. You can also of course use this program to develop print materials.
Adobe Soundbooth CS4
Sound-editing software no longer available since it’s being replaced by Audition.
Adobe Premiere Elements 7.0
It’s not on your laptops but you used it for video editing for the Culinary Arts bake sale project. It’s installed on the video editing machines in the back rooms. Note: the Elements versions of Adobe products are cheaper and have less bells and whistles. You might have used the Elements version of Photoshop in your Digital Images class.
Want more? Click here to see all of Adobe’s products.