If you are a new bee in area of web design and you know somethings that you know, somethings you need to know than you are in a good place. As we all know when there is talk of some website the first thing that happens is designing, mock up of the website about how it will look on web, how it will look on different screen sizes or how different elements of design gonna take place in different mock ups. In this post there will be flow for your better understanding that how things go from starting point to a well formed website. This is just information about flow and all, I will be explaining these individual in later posts so be patient and go with flow.
Step 1: A rough look or mock up for Design- What comes in your mind when you hear word mock up? OK, lets try another easy word rough design. Do you remember the rough sketch on back of your notebook when you try to accomplish a big thing or trying to show the structure of your home like open space at front, a entrance door, one bedroom, two restrooms, a kitchen, bathroom set and one back door. This is the same way mock ups work in Photoshop.
Step 2: Getting things ready for Design- Want to know why it is hard to design, sometimes you thing that designing is such a mess and sometimes actual designing thing was not a great deal but it took great amount of time of your day, why is that? If you think a little about your website, just think what things you are gonna be using to design or to develop your website? Having those things ready by your side will be great relief. Get all fonts, images, color swatches, number of color you gonna use and others things if there are any.
Step 3: Cutting/slicing things from Design- Once you done with design and you have finalized PSD(Photoshop Document) the next thing is to slicing design into images. Whole design will be there in collection of images now.
Step 4: Exporting/Organizing sliced up things- All sliced up? Next simple things is to get all images and group them in different folders or you can say categorize them. These all folders make it easy when developing things with HTML and CSS.
Step 5: Putting CSS + HTML together to develop- Final fully functional website will be out there to be published on internet. The magic that left is CSS and HTML coding together and getting all things together to get fully functional website. For example- putting onclick event on button image, changing on hover effect the different image etc.
That’s all for this post, later I will be posting post on these individually in great detail. So Be ready for next post, see you soon.