How to Design a Graphical User Interface

Step-by-Step Guide

1. 1

   Step 1: Remember the Golden Rule.

   In order to successfully understand and develop your own Interface Designs, master the basic and/or intricate shapes. (The circle, square, triangle, star, etc).
   
   Every conceivable shape or design ultimately consists of a series of very basic shapes.
   
   If you can picture it or see the basic shapes combined with any design or photo, then you can draw/design anything from memory, not just copy or trace a picture.
2. 2

   Step 2: Forget everything you think you know about "Interface Design".

   Remember to have fun.
   
   If your design isn't fun, then your design is bound to fail in the long run. , Create a layout where the elements build on each other like building blocks. ,,, For example, you might make a document that's 1024 pixels wide BY: 848 pixels high with a white or transparent background. , Then create 11 Folders, one for each area, in Photoshop.
   
   Grouping allows for easy access and edits.
   
   Logo Area Search Box Navigation/menu area Webpage slider Search Button Group Search Result Options L1 Content L2 Content Right Content Latest News Footer , Use different colours for each workspace layer or group.
   
   Numbering sections allow for easy access of your .PSD (source file) by anyone that needs to make changes or add more design elements in your absence.
   
   Your design should resemble the following "Workspace layout."
   
   , , And check that it is locked for editing. ,,, Do not forget to save your work as you go along. , Remember to check that you are working on the relevant section.
3. 3

   Step 3: Find the perfect scalable layout/design.

4. 4

   Step 4: Decide on the dimensions (final Size) and colour scheme (color swatches) for your design.

5. 5

   Step 5: Choose your desired graphic design application (Photoshop

6. 6

   Step 6: Fireworks

7. 7

   Step 7: Create a "New Document" and save it as "your_file_name".

8. 8

   Step 8: Create "layers" or "groups" named "work spaces".

9. 9

   Step 9: Input the main "sections" that your design will have.

10. 10

    Step 10: Dim/fade (change the opacity) of the Workspace Layout group.

11. 11

    Step 11: Use the blocked out sections to begin laying out your "Website elements."

12. 12

    Step 12: Make sure that the "workspace layout" is at the very top of your layers.

13. 13

    Step 13: At this point you can begin adding the web elements and content in any of the demarcated sections or "work spaces".

14. 14

    Step 14: Add/design the content of all your sections

15. 15

    Step 15: as well as the search box.

16. 16

    Step 16: Keep working on content until you're happy with the layout.

17. 17

    Step 17: Continue to add more and more detail to the sections.

Detailed Guide

About the Author