Q1. Mention what are the main language or platform used for web-design?
Ans
The main language used for web-designing are
- HTML: Base template
- CSS: Styling
- JavaScript: Functionality
- PHP: Server side scripts
Q2. Mention what are some bad examples of web design?
Ans
- Blinking, spinning or flashing images
- Black background with white, light or pale text
- Black backgrounds with dark text
- Busy tiled background images with any color text
- Everything Centered
- Too many images or Huge images
- List of links
- Too many headlines or Blinking text
Q3. Explain what is a Dreamweaver Template?
Ans
Dreamweaver Templates enables webmasters to define “non-editable” and “editable” regions of a webpage, only in Dreamweaver template the “non-editable” regions can be edited. Any changes implemented to the Dreamweaver Template will update any HTML pages that use the template.
Q4. Explain what is the difference between “visibility:hidden” and “display:none”?
Ans
- visibility:hidden: This property hides the element, but it still takes up space in the layout
- display:none: It eliminates the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
Q5. List out some of the JQuery function used for webpage designing?
Ans
- Simple slide panel
- Simple disappearing effect
- Chainable transition effect
- Accordion#1 and Accordion#2
- Animated hover effect
- Entire block clickable
- Collapsible panels
- Image replacement gallery
- Styling different link types
Q6. Explain what is Grid system?
Ans
A grid system is a structure comprising a series of horizontal and vertical lines which intersect and used to arrange content. It is a way of providing a system that designers can work with the structure and present content. For web design beginners, it is always suggested that they use the pre-made framework for web design as they are relatively easy to use.
Q7. What is white space and how does it affect content on the web? What are some of the principles of “gestalt”?
Ans
White space in graphic design is any area left intentionally blank. It doesn’t have to be white. Both in web design and other media white space can be efficiently used to visually separate or group elements, to draw attention to a specific element, to reinforce the content layout or grid. Sometimes, white space is also used purely aesthetically to create visually interesting compositions.
Gestalt principles are part of the theory of visual perception. They deal with the mind’s ability to “see” things that are not explicitly visible, by subconsciously combining shapes, finding similarities, completing compositions of physically disconnected elements. A few of the principles commonly used in design are:
- Similarity - the human mind perceives elements with similar features (either in color, shape, size or combination of the three) as related, meaningfully connected or grouped together. This is especially useful in navigation systems design and application toolbars;
- Proximity - similarly to the similarity principle, elements which are placed close to each other are considered grouped, related, or parts of a whole. This is a building principle of layout design. It’s especially important when designing pages with large amounts of varied content (like the home page of a news website or application)
- Closure - when faced with a familiar looking object which is incomplete in its visualisation (parts of the image are missing) the mind automatically “completes the picture” or fills in the blanks and effectively sees the image as if it was fully displayed. This is a principle often used in logo design. Using the closure principle can make an element more interesting to look at (as the user’s mind “works” to complete the element) which makes the design more memorable;
- Figure-ground relation is the tendency to mentally separate “objects” from “backgrounds” based on combination of color, shape and past experience. When properly used in graphic design, this principle directs the user’s attention to important elements of the composition;
- Common fate - elements moving synchronously in tandem are often conceived as grouped or as parts of a single object. Common fate can be useful in interaction design;
- Continuity - the mind’s ability to see connections and follow one path or another based on similarities and to follow lines past their end points. This principle can be used in logo design to generate interest. It can also be used when building layouts or compositions to make them look as a single tidy object, rather than a bunch of cluttered elements.
Q8. Name a few easy ways to optimize a website. Where would you start?
Ans
There are many ways to improve the performance of a website and developers may have ideas specific to the nature of each project. A few of the more common and easy to implement optimizations are:
- Minimize CSS and JS code to save a few hundred kilobytes of each page load.
- Have all assets compressed in the most appropriate format and at optimal settings (a good balance between quality loss and speed gain in important).
- Enable server side caching mechanisms (Memcached, Redis, gzip compression, APC, etc.).
- Serve responsive images according to device screen size and pixel density and only load the appropriate ones for the user’s case.
- Write clean and concise HTML, don’t include compiled frameworks, stop loading unused scripts or CSS modules.
Q9. What are the advantages and caveats of using a CSS framework such as Bootstrap or Foundation? What’s the proper way to include frameworks in your workflow?
Ans
- Advantages: Frameworks allow for fast prototyping of layouts, elements and pages, and promote reusability of consistent elements across the whole project. This often eliminates the need of dead end deliverables such as Photoshop mockups or other high-fidelity static sketches. In contrast, the HTML prototypes powered by a framework later evolve into the actual production templates code used by the new site. Another advantage is the myriad of development tools that come with the better frameworks: LESS/SASS preprocessors, variables for key values in the design, builder tools like Grunt/Gulp, ready to use JS scripts for commonly used interactions (modals, carousels and collapsing boxes, among others). Finally, frameworks come with good practices and commonly used pieces of standardized, well documented code built-in, and a large community to turn to when issues arise.
- Disadvantages: Although frameworks provide tons of built-in features and eliminate the need to write repetitive code, they also tend to generalize common elements and often lead to samey-looking designs. Another caveat is that when using a framework for a complex or unconventional design or a layout with a more complex grid, there’s more effort involved in “fighting” the frameworks compared to simply writing the code from scratch. Sometimes, frameworks come with too much stuff that never gets used, or redundant styles that get overridden if not used correctly, leading to slower load times compared to a clean code written from scratch.
To properly utilise a CSS framework, developers should not include the compiled CSS of the framework and then write their own overrides. To take full advantage of the framework, the built-in development tools should be used: variables to be set, LESS/SASS mix-ins to be utilised, and the unused components to be excluded. Another frequent mistake is the heavy reliance on framework markup for layout and styling, which makes the separation of content and style harder and leads to design changes requiring editing HTML instead of CSS.
Q10. When do you use JPEG compression and when would you prefer PNG instead?
Ans
Different image compression formats have different purposes with different compression methods.
- JPEG compression reduces the image size by finding areas of a similar color; the higher the compression level, the more aggressively it looks for such areas leading to a loss of visual information and the generation of artefacts at the edges of the compressed areas. This compression is effective for photos, drawings, gradients, most illustrations and other colorful, rich images. JPEG doesn’t work as well for screenshots, simple UI elements, flat icons, schematics, and it is especially bad for text.
- PNG compression works by reducing the number of used colors. Depending on the level of compression this could lead to slight loss of color shades. PNG is great for logos, icons, signs, images containing text, for simple illustrations, UI elements and screenshots. Unlike JPEG, it also allows images to have transparent areas. PNG files are usually larger than JPEGs and don’t provide good compression for photos and complex, colorful images and gradients.
Q11. What makes a good color scheme? Can you name a few examples of complementary, analogous and monochromatic color schemes?
Ans
Some color combinations are more visually appealing than others, and there’s a reason for that: The human mind looks for harmonies, order and systems, and color schemes that adhere to such systems look more “pleasing”. There are several ways to combine colors effectively.
Here are a few:
- Monochromatic - using a few different hues of the same tint, such as combining pale green with deep, dark green and using bright green for accents. It’s good for foreground color and background color combinations.
- Analogous - using colors that stand close to each other on the color wheel (and the rainbow), such as orange and yellow, blue and green, or red and purple. Usually, it works for elements placed next to each other, but not as effectively as combinations for foreground and background.
- Complementary - using colors which stand on opposing sides of the color wheel such as orange and purple, blue and yellow, or green and red. These colors generally have good contrast and if they also differ in lightness, they can be used as pairs for foreground and background colors. The designer should remember that certain complementary combinations don’t look good (red on green and vice versa are irritating to look at and are rarely used in combination) while others have stunning contrast.
Q12. When you embed self-hosted video on a web site, what format would you use?
Ans
When you use video on a website using the HTML5 video element (as opposed to embedding from YouTube, Vimeo or other video-hosting services) it’s the website’s responsibility to serve each browser that video in a format that the browser can play.
As of recently, major browsers, OS and devices support the MP4 video format (using MPEG4 or h.264 compression). To assure compatibility with Firefox clients and certain Android devices that can’t play an MP4 video, it’s good to have copies of the video in OGV and WebM formats. When multiple copies are available, all files should be listed as source elements of the VIDEO tag.