Is Wire Framing Tecnical And Does it Require Coding?

IS A WIREFRAME TECHNICAL AND DOES IT REQUIRE CODING?Hi I am Christopher Michael Cooper CEO Of This Life Is Not Pretend Grayling Design, I am A Certified Graphic Design Specialist By Trade. To answer your question, A wireframe which is also known as a schematic or even a screen blueprint is a skeletal visual guide of a website's framework. Wire framing is a very important step in the design process, and allows you to define the information hierarchy of your design, making it much easier to plan a layout according to how you would like your user to process the information. Wire framing is basically an architectural blueprint. You cannot start building layers in photo shop, or begin writing blocks of code, if you do not know where the information is going to go. Also note a wire frame is very useful to determine how a user interacts with the interface. Wireframes can include various states of button or menu behaviors. Wire framing is important because it will let the designer plan out the layout interaction of an interface without the designer getting distracted by colors, typefaces or copy. STEP 1- DESIGNING YOUR PROCESS- Find the right process that you are most comfortable with, different designers approach wire framing and it's translations to visuals or code in different ways. A well known process by 37 SIGNALS is to use sketches and go straight to code. Some people are not really good at sketching and prefer not to use a wire framing tool at all. Other Graphic Designers want to have as many steps as possible to minimize deviations or so they can think through every single iteration as the design takes shape. Eventually you will develop your own process. Designing a wire framing takes using Illustrator first to create your wire frame, Than you create a visual in Photoshop and last you do the code using CSSGRID. This is the typical wire frame process. STEP3-PICK YOUR TOOLS- SOME TOOLS COMMONLY USED ARE: -Axure,-Omnigraffle,-Keynote/Power Point, -Adobe CS,-Fireworks,-Illustrator,-Photoshop,-InDesign,-Protoshare. STEP 4-SET A GRID-There are a lot of regards to Grid Systems but simply put a Grid is a structured and simple way to layout elements. Adobe Illustrator is commonly used for setting a grid.STEP5- DETERMINE LAYOUT USING BOXES-Draw boxes on the grid. Think about the order of information you want to present to visitors, top to bottom is easiest followed by left to right. STEP 6- DEFINE INFORMATION HIARCHY WITH TYPOGRAPHY-When you are satisfied with how the boxes are laid out drop pieces of your content to get a feel of whether the information is being well structured. Never be afraid to experiment. STEP 7-FINETUNE WITH GRAYSCALE-Turn your wireframe to a grayscale to determine the visual strength of your elements before you have to pick a color palette, It will help you with the visual design process in the next step. STEP8-TURN YOUR WIREFRAME INTO A VISUAL IN PHOTOSHOP-EXPORT IT INTO A .PSD.STEP9-CODING-Last you need to translate your wireframe into code using CSSGRID. IF YOU HAVE ANY QUESTIONS OR INQUIRIES PLEASE CONTACT ME Christopher Cooper www.thislifeisnotpretendgraylingdesign.com