I’ve been doing a lot of reading in the area of web design and development lately and one theme has been popping up more and more: a good designer pays attention to details. Throughout the ages graphic design as a whole has been extremely focused on details. An artist working on something as simple as a printed panel would need to make sure everything was absolutely perfect because once the project goes to press, there’s no turning back… well… at least not without having to pay an arm and a leg for it.
So what is it that makes the web less detail oriented? Are the designers less skilled? Being one, I should hope not. I believe that it is a mentality that so many of us fall into just by interacting with the web on a daily basis. We’re so used to instant gratification and everything being done at the speed of a mouse click that it almost feels like the processes used to make those things should be just as fast. Clearly no one should be able to design a site in mere seconds, but many times I even find myself thinking “well I can just launch it and include it later” yet more times than not, it’s never revisited. Web design is such a fast paced industry that there is almost an urgency to get things done in record time, but when things are rushed there is no time for the details.
Something as simple as a tooltip on rollover, or slight color adjustment on a section of a graphic to make text more readable can greatly increase the effectiveness of a design. It’s easy to be passive with the web, especially when clients continually ask for design aesthetics that you may not agree with, so here’s a list of tips that I’ve found to be incredibly helpful:
- After your first run though a design, expect there to be changes. Send your design not only to your colleagues but people who don’t work within the industry and ask for their gut-reaction. An interesting take on this is the “5 second test”. You have someone look at your design for 5 seconds and ask what they remember. If they say the things that the site is meant to broadcast, you’re on the right track. Also by having people who aren’t designers give their opinions, you’re going to hear a lot of things that you wouldn’t even think about. Designers typically have a much higher tolerance for things that are maybe too abstract for the average viewer.
- Collaborate with your colleagues. Before sending a design off for client review take the time to have an in-depth discussion with your colleagues or anyone else involved with the project on your end. Go over each element with a comb and discuss how things might be altered to provide better branding, present more clear-cut content, and reach your client’s goals.
- After collecting these suggestions, read over your specs again. This keeps the mission of the site fresh in your mind as you’re taking a new look at the design, encouraging you to think beyond just your notes about what to change, and more so why to change.
- When making small changes, call someone over and have them watch you change it on the fly. Ask them if one change is more effective or useful than the other. If working in Photoshop, maybe save a copy and lay the designs side-by-side. If working in Dreamweaver, duplicate your CSS file and make changes to each separately. Oftentimes it’s easier to pick something out when there’s a comparison.
Bottom line: the web has infinite potential for truly great and effective designs. Constantly updated tools and capabilities leave the mind to wander through endless possibilities, it’s just a matter of setting aside the time to really focus in on the little things. If asked, would you be able to give a reason for each detail in your design? If not, you might want to look at it a little bit harder.
Ask a younger graphic designer today to imagine what the world was like before Photoshop. It’s quite impossible! How did Earth spin for so many years without layers, masks, color channels?
Photoshop has revolutionized the world we live in. And most don’t notice how much of their every day life has been “photoshopped.”
But google Photoshop tricks or tips and you’ll become bombarded with the praises sung by millions of devoted Photoshopees. In my quest, I’ve discovered many sites chocked full of cheesy designs, impossible navigation and difficult instructions.
To save you time and for the greater good of adding quality to the design world, I’ve compiled a short list of Tricks, Tips and Tantalizing Tutorials worth checking out. Please feel free to provide your own favorites. Let us all revel in the power this software possesses!
101 Photoshop Tips in 5 Minutes
Type: Video set to music
Author: Deke McClelland, an Adobe Certified Expert, author of more than 80 PhotoShop books, including Photoshop Bible
Summary: McClelland fast-paced, slightly nerve-wracking video highlights keyboard shortcuts. While it may be a bit overwhelming when compared to the sit-back-and-relax tutorials, you’ll be bound to pick up a few shortcuts you should be using more often.
Top 5 Photoshop Tutorials
Type: Silent videos
Summary: This easy-to-follow collection of five fantastic tutorials is a peaceful alternative some might crave after sitting through 101 Photoshop Tips in 5 Minutes.
Type: Video with narration
Summary: Vanishing points are demystified and the clone tool makes a strong case for being one of the most powerful components of Photoshop.
Type: Blog compilation of Photoshop Tips, Tricks and easy-to-understand Tutorials
Summary: Bookmark alert! Next time you need a break from the mundane or some entertainment over your lunch hour, check out this blog dedicated to Photoshop.
Visit the blog
PSDTUTS: Spoonfed Photoshop
Type: Blog stuffed with rocking tutorials to enhance any designer’s Photoshop repertoire
Summary: Clean layout and navigation meets high-end Photoshop design tutorials and tips. Need I say more? Brush up on some skills or discover new ways to use your favorite design software.
Visit the blog
People use the terms “web designer” and “web developer” interchangeably. When creating a new website or upgrading a current site, who should you hire?
This article will explain the difference in the two disciplines of a web designer and a web developer.
Websites contain different elements, including appearance, content, functionality, and usability. Each requires a different set of skills. A web designer focuses on what you see on a web page. A web developer focuses on what you can do on the website. Let’s look at the different properties.
The appearance is a first impression of a website. It is the overall look and feel of the website… graphics, color scheme, page layout, and site navigation design. The appearance determines whether the site looks professional, warm, edgy, or even retro.
Because the appearance is the first element the user is exposed to when visiting your site, it can make or break your website, so finding a skilled web designer is crucial. If a site design is unprofessional or unattractive, visitors will most likely move onto the next website.
A web designer must have an eye for aesthetics and possess superior graphic design skills to create unique and appealing sites. The web designer on a project needs expertise and creativity to produce the correct look for your website based on your industry and target audience.
Content is everything you see on a website, including text, pictures, audio files, background music, and videos. From product descriptions to privacy policies, content is the meat of a website.
A typical web designer or web developer does not create the text for a website, but takes the content you provide and adds it to the design they’ve created. Because content is crucial to retaining your visitors’ interest and ultimately their purchases, awebsite copywriter is highly recommended to assist you with your written content.
Music, audio, and video files will have to be created in the proper format for use on the web. The web designer on the project should have enough knowledge to be able to format these files in the proper way. To tie all the content elements together, you need a good page layout.
A web designer can organize and layout your content so it is appealing and user-friendly.
Functionality includes all the interactive parts of the web site, such as a sign-up form, clickable order buttons, animation, online games, currency converters, search engines, etc.
Flash is another programming device used by a web developer. It can be used for animations and swapping pages.
The role of the web developer is to integrate the functioning elements of a website into the HTML for the interactive features to work together properly and seamlessly.
Usability is a measure of how easy the site is to navigate, obtain desired info, or perform other actions, from the point-of-view of the website visitor. By working together, a web designer and web developer will test the site based on different criteria. When checking the usability of a website, the web designer and the web developer should be asking specific questions to determine if the site is meeting the objectives.
Is the design attractive and appropriate for the topic of the website? Skulls and crossed bones are perfect for a punk rocker’s website but would be a disaster for a pediatrician. Is it easy to navigate? If users can’t quickly find the info, product, or services they are looking for, they’ll move onto another site that has better navigation.
Does the site load quickly? In this fast-paced culture, visitors won’t wait around for page elements and graphics to download. Do all the features work properly? If features don’t work properly, then you’re wasting your visitor’s time.
In other words, will the visitor stay and explore the website or get frustrated or annoyed and click away, never to return.
Design versus Development
There is a considerable amount of overlap in the roles of a web designer and web developer. While a particular web designer may have the ability to perform some of the programming needs a web developer would fulfill, a typical web designer will focus on the actual appearance and layout.
However, if your site features program-intensive elements, such as a search engine or website call tracking, you’ll need a web developer to do the job correctly. In a typical scenario the web designer and the web developer work together to create the website.
Then together they perform the usability testing. When everything looks great and works properly, the website owner supplies the content, which the web designer adds to the web pages.
When creating a web site, you’ll want to find the best web designer and web developer you can. Most likely, these roles will be performed by two different people. While both should know enough about the other’s role to effectively communicate and produce the results you’re looking for, each should be highly specialized in their craft.
You may find a web designer who is good at the programming side of a website, but you’re taking the chance of receiving a site that a web developer could have programmed to function better, more efficiently and within a quicker turnaround time.
And if you want people to find your site, hire a great internet marketing firm.
Adobe Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and products from Adobe.
Labs fosters a collaborative software development process. This allows customers to become productive with new products and technologies faster and the Adobe development teams to respond and react to early feedback in order to shape the software in a way that meets the needs and expectations of the community.
At Adobe Labs, you’ll have access to resources such as:
- Prerelease software and technologies.
- Code samples and best practices to help accelerate your learning curve.
- Early versions of product and technical documentation.
- Forums, wiki-based content and other collaborative resources to help you interact with like-minded developers and Adobe.
If you are forward-thinking and enjoy the challenge of working with the most current technology and products—despite a few rough edges—we are looking forward to working with you in Adobe Labs!
Adobe® Dreamweaver® beta
(May 27) New features help teams and individual developers alike reach the next level in performance and functionality.
Adobe Fireworks® beta
(May 27) Create, edit, and optimize web graphics more accurately and faster than ever with the enhanced toolset.
Adobe Soundbooth® beta
(May 27) New tools for video editors, designers, and others who need to accomplish their everyday audio work.
Just incase you may have missed it…
Adobe has announced that it will discontinue its one-time flagship website creation tool, Adobe GoLive. The rumor mill has long held that Dreamweaver, a web development tool that came into the Adobe fold following the 2005 acquisition of Macromedia, would one day replace GoLive and now it seems that the day has finally arrived.
Although GoLive is still for sale on the Adobe site, Devin Fernandez, GoLive’s product manager, tells Macworld that the company believes Dreamweaver is a better fit for today’s web developer.
Adobe has been touting Dreamweaver over GoLive for some time, complete with a “switcher” website dedicated to convincing GoLive users that Dreamweaver was better suited to their needs.
The demise of GoLive shouldn’t come as too great of a surprise considering that the switcher site itself reads: “before purchasing Adobe GoLive 9 software, consider Adobe Dreamweaver CS3, the market-leading tool to design, develop, and maintain websites and web applications.” That’s not exactly the kind of faith in GoLive that inspires purchasing confidence.
If you’ve got a brand new shiny copy of GoLive 9, fear not, Adobe plans to support GoLive users with online tutorials and help, as well as assistance for those that want to migrate to Dreamweaver. There will also be special $200 upgrade price for GoLive users who want to make the leap to Dreamweaver.
GoLive isn’t the first app to bite the dust as a result of the MAcromedia acquisition, previously Adobe retired Macromedia’s Freehand app in favor of Adobe’s homegrown Illustrator CS3.
For more information, go to…
The Open Screen Project is dedicated to driving consistent rich Internet experiences across televisions, personal computers, mobile devices, and consumer electronics. The Open Screen Project is supported by technology leaders, including Adobe, ARM, Chunghwa Telecom, Cisco, Intel, LG Electronics Inc., Marvell, Motorola, Nokia, NTT DoCoMo, Qualcomm, Samsung Electronics Co., Sony Ericsson, Toshiba and Verizon Wireless, and leading content providers, including BBC, MTV Networks, and NBC Universal, who want to deliver rich Web and video experiences, live and on-demand across a variety of devices.
The Open Screen Project is working to enable a consistent runtime environment – taking advantage of Adobe® Flash® Player and, in the future, Adobe AIR™ — that will remove barriers for developers and designers as they publish content and applications across desktops and consumer devices, including phones, mobile internet devices (MIDs), and set top boxes. The Open Screen Project will address potential technology fragmentation by allowing the runtime technology to be updated seamlessly over the air on mobile devices. The consistent runtime environment will provide optimal performance across a variety of operating systems and devices, and ultimately provide the best experience to consumers.
Specifically, this work will include:
- Removing restrictions on use of the SWF and FLV/F4V specifications
- Publishing the device porting layer APIs for Adobe Flash Player
- Publishing the Adobe Flash® Cast™ protocol and the AMF protocol for robust data services
- Removing licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free
For more information, go to…
With the release of many (if not all) of the Adobe CS3 Packages comes a nice new release of Adobe’s famous PDF creator, Acrobat. Throughout school I became familiar with Adobe Acrobat 7, using it to put together mockups of websites without needing to do any hard coding. Although it took a little while to get used to, once you know your whereabouts in the program it’s fairly easy to use. This is until the release of Acrobat 8.
My initial opinion: Acrobat 8 is a miracle worker. Pulling other files together to make one packaged pdf, it’s so simple and so easy to use; just follow the giant buttons they put in front of you. However, beyond the initial creation of the PDF, Acrobat 8’s features can be difficult to find. Things like bookmarking and paging are still very simple, but more complicated interactive features such as linking pages through buttons are far more difficult to locate. Is the easy initial set up worth the wall of confusion once the pdf is sewn? The difference between versions 7 and 8 are worlds apart. I suppose all of us with experience with prior versions will have to do something no one ever wants to do….read the manual.
Besides the bit of confusion, overall the facelift which Acrobat received was a fairly nice one. A user with little experience of sewing files into pdfs will find this program very friendly and easy to use.
On March 18, Adobe revealed its plans to begin development on an iPhone ready version of its proprietary media player, Flash. This came after Apple’s release of an iPhone software developer’s kit or SDK. There has been an ongoing controversy over how and when Flash, a now internet staple, would be supported by the popular handheld device.
Current Flash technology is said to be “too slow to be useful” by Steve Jobs, and no faster or lighter version exists which will provide much value to the Web experience on an iPhone. So the question arises, how will this middle man solution affect not only iPhones but the technology used on PC’s and Mac’s currently? If a faster, lighter version can be created for iPhones, why not create it for traditional Web browsing? Also, if Apple continues to demand only standalone applications in its guidelines, how will they handle the long agonized over Flash plug-in? There are many more questions to be answered before the iPhone can compare to traditional internet browsing in terms of interactivity and impact; all the things that Flash enables on the Web.
Including a flash movie in a basic HTML page. Sounds easy enough, right? How about including a flash movie in HTML that is standards compliant AND works with the major browsers used on the web? If you’re like a lot of designers this probably yields frustration, as the markup for doing such can be a bit of a challenge.
I came across an article a few months ago written by the author of Dreamweaver MX Web Development, as I struggled with creating my own website. Drew McLellan provided much insight into the markup of Flash movies (or in my case, a navigation system I had developed) and led to what we’ll consider a coding theory: it works for me until I find a browser that disproves its functionality.
It should be noted that as I code, I test primarily (and most heavily) with IE, Mozilla, Opera, Safari, and Netscape. I apologize if the explanation following alienates a favored alternative, and I welcome any amendments.
Because Flash has come equipped with some kind of means of creating an HTML page to display the indigenous movies, the markup for the majority of Flash created HTML sites is very similar. This hardly seems it should be a standard for embedding movies, as it proves to be quite a beast within the code. Check this out:
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0” width=“400” height=”300” id=”movie.swf” align=””>
<embed src=”movie.swf” quality=”high” width=”400” height=”300” name=”movie” alignt=”” type=”application/x-shockwave-flash” plug inspage=http://www.macromedia.com/go/getflashplayer>
Pretty intimidating, no? In addition it requires that most of the values be declared twice. Much like me, my coding does not enjoy feeling bloated. Surely there is a better way.
I’m not sure where it came from, but somewhere in my repertoire there existed an <embed> tag that I assumed would be a good place to start. From what I understand, this element was developed by Netscape as a way of embedding multiple plug ins and players within their pages. As I experimented, I did find that it worked in Firefox, but was not supported with IE. Because <embed> is not standards compliant, it will prevent the page from being validated. Thus I had to say goodbye to my <embed> tag.
Without that- we are left with the <object> tag, which conveniently allows for child elements within the tag, and it is supported by almost every browser in regular internet rotation. While nothing is required as far as attributes, there are several relevant attributes that may be used to reference other elements. Take your own commercial break now if you would like to research what those may be.
The attributes are a little dicey to implement, however, as some will simply cause the browser to ignore the object entirely. This can occur, for instance, with the ‘classid’ tag. Obviously this defeats the purpose of the entire ordeal. They can, however, suggest to the browser which player it should use for the object. A simple swap of ‘classid’ with ‘type’ attribute can tell a browser where to search for a necessary plug in. I will show this code further down the closer we get to the final theory.
Other attributes that should be stripped for increased functionality include ‘codebase.’ While it does prompt a user to update what they are currently using, it can also prevent the movie from playing. Thus, another attribute must be leaned on to continue efficient functionality. To work around this, just add a movie with no intended purpose to the front of the site. Add the codebase attribute to it, so that it still allows the user to be prompted if their plug in is outdated. It will only be a few kilobytes of nothingness, but will allow the user to optimize their viewing experience. Perhaps not the most efficient of approaches, but it will certainly get the job done.
Adding the data attribute will enable the movie to play, but again we find problems with the existing coding. IE required that the entire movie loads before playing what is embedded in the page. So, if your movie of the small variety, you may consider stopping now. BUT, if you have anything requiring some time to load, you’re not done yet! Frustrated yet? Stay with me…
Here is where we stand:
<object type=”application/x-shockwave-flash” data=”movie.swf” width=”400” height=”300”>
<param name=”movie” value=”movie.swf” />
This is where Drew adds his brilliant hack to the code. By creating a very small container movie which loads in the first frame of the actual movie, the Flash element should be loading at an acceptable rate. This requires a bit of coding in Frame 1 of the Actionscript, and a way to call back the movie with:
Regardless of the nature of the Flash element, this method should work.
At last we arrive. And obviously we have eliminated a lot of the bloating our poor coding had fallen victim to in the above coding.
<object type=”application/x-shockwave-flash” data=”c.swf?path=movie.swf” width=”400” height=”300”>
<param name=”movie” value=”c.swf?path=movie.swf” />
If you recall the discussion of the child element above, feel free to play with that and add your own image, for instance, for users who do not have the Flash plug in for your page. It can be amended to the above coding within the <object> tag.
As a soon to be graduate from a college institution, I find myself reflecting upon a time when advanced web design and new software presented itself as a giant question mark. What to do, how to learn, what to learn, and methods of implementation all begged for answers, and for anyone venturing out on their own- these questions can be a little intimidating. And just as eager young minds strive to find new techniques and design tricks, every good designer is constantly learning, exploring, and probing for ways to beef up their skills.
With that preamble, below I will share a few links I find useful in… well, just having some fun within some pretty amazing software.
For basic flash tutorials or forums used to work out frustrating problems or general inquiries, check this site out:
For those looking to find special effects techniques in Photoshop, the link below should satisfy some of your curiosity. There are also contests for those of you who already have your Photoshop muscles bulging like the Hulk. But seriously, who doesn’t want to turn themselves into a marble statue or a celebrity photo into an alien life-form?
And lastly for now, for those of us fascinated by the power of Adobe’s After Effects, a website that allows even us n00bs to create 3-d room tours and ink splatter intros!
That’s all for now, but hopefully that provides some entertainment for beginners through advanced designers poking around on the net.