Think of a wireframe as a skeleton for your design, the elements seen in a wireframe are the base on which your design should rest.
Generally, wireframes are a helpful way to illustrate to designers what elements are required on the layout, how the information architect has determined to be their importance on the page and the order in which these elements should be seen by the user for best website usability.
Now, you may be thinking, “Well that takes all the fun out of it!” Sure, I suppose you could think of it that way, OR you could think of it as “An efficient way to ensure your layout is as effective as possible.” or “YAAY! Now I just have to make it look good!” Usually wireframes don’t ULTIMATELY dictate element placement on the page, however they do usually shed some pretty good light on how they would like the users eye to go first by using size and color information shown on the wireframe.
In addition, wireframes are a great way to show clients what you’re thinking about designing before spending a long time on a design, just for them to end up moving elements around again and again and again, each time you’re having to go into Photoshop and make each revision so the client can “see” what you’re suggesting. Wireframes offer a quick, simple solution to the visual flow of a page and lay the foundation for your final design.
When designing from a wireframe, you should always check your final design to make sure it has all the elements that are shown on the wireframe.
Also, be very careful not to design any additional functionality that wasn’t on the wireframe into a design without consulting your team first, as these “added features” could cause serious scope creep.