Design document – HLD & LLD

Here we mainly focus on LLD alone..

Thanks to dinesh for explaining in a clear way..

1) What is design document?

  • The design document gives the main idea and structure of the product that would be developed by developers.

2) What are the different kinds or Types  of design documents ?

  1. High Level Design Document also called as HLD.
  2. Low Level Design Document also called as LLD.

In this article, we will discuss about LLD :

Low Level Design Document:

  1. Low Level Design (LLD) is like detailing the HLD.
  2. It defines the actual logic for each and every component of the system.
  3. Class diagrams with all the methods,Properties,variables and relation between classes comes under LLD.
  4. We can represent LLD of the application in many ways.
  5. Some of them could be : UML (Class diagrams,Interfaces,Sequence diagrams etc), Powerpoint,Screen shots and Pseudo code.
  6. This depends on case to case basis.

3) What is the approach for preparing LLD  or What parameters or points should be considered for preparing LLD ?

  1. Requirements should be understood clearly. Based on the requirements we can come up with LLD. Even for Agile methodology based on the initial requirements we can come with the initial design, but we need to fine tune the design as and when the requirements are clear. We need to refine the LLD till the requirements are freezed.
  2. Identify High level Entities. High level entities are objects, or groups of objects, that constitute major constructs of your design. Good examples of entities are a data access layer, a controller object, a set of business objects, etc…
  3. For each entity, define the low level design: This is where your objects and object relationships are defined.

For each object (or set of objects) define the following:

Usage :

  1. Describe in a paragraph how the object is used and what function it serves.
  2. If an object will interface with an external object or system, it is a good idea to show the interface for the object.
  3. Most importantly, you must again describe your thought process for defining the object as you did.
  4. They don’t have to be verbose, just enough to get the point across.


Controller, Data Access Layer etc.  You can explain what is the controller class does.

Model :

  1. This section should contain the Corresponding classes,methods,Interfaces etc related to each and every high level entity.
  2. Basically supplement of each entity which is listed under .
  3. ‘Identify High level Entities – Point #2′.  E.g. : Controller Class. It should list all the methods,Interfaces,Inherited classes etc related to the Controller class.
  4. In a Nutshell, it is the class diagram depiction  of the Controller.
  5. Depending on the need you can provide the description and the interaction between the components.

Interaction :

  1. This is also a good section for interaction diagrams.
  2. An interaction or Sequence  diagram shows how a set of objects or entities communicate with each other to perform a complex task.

Benefits, assumptions, risks/issues:

  • Make a list of 5-6 top benefits of the design, a list of ALL known risks/issues and a list of ALL assumptions.

Advantages :

  1. A good Low Level Design Document developed will make the program very easy to be developed by developers because if proper analysis is made and the Low Level Design Document is prepared then the code can be developed by developers directly from LLD  with minimal effort of debugging and testing. This helps the development team to give quality product.
  2. Design document will help you in  analyzing  the timeline for each component development. So over all rough estimated time of completion can be calculated in the design documents stage itself. This can be used to compare with the target date set for completion of the project. If the time is greater than target date then unwanted and less important components can be left and may be taken off for next phase of development. Thus on whole good design document helps to deliver quality software product within the timeframe.
  3. It helps us in understanding  the requirements in a crystal clear manner. If there is any gap in the requirements we can get clarified before the development starts.
  4. It minimizes unexpected complications by addressing them before the code is written.

So it is very essential to have a good design document for a software product to b developed on time with good quality.


Fluid Layout CSS

Fluid layouts are nothing but using %’s(width and height) in a desired manner.

You can refer youtube here

Very simple and effective example is here

<div class=”container”>
<div class=”a”></div>
<div class=”b”></div>
<div class=”c”></div>

.a, .b, .c {
float: left;
height: 200px;
background: #f00;
width: 21%;
margin: 2%
.b {
width: 46%;
background: #0f0;
.c {
width: 21%;
background: #00f;
.container {
width: 100%;
overflow: hidden;
background: #aaa;

If you want to get your 3 side by side divs to div down by down while resizing..then you should use width: 123px; and float:left.

you wanna have your image or content in center?? try margin-left: auto and margin-right:auto and display:block

If you want your image to attach to div so that image in div should also resize along with window??

Nothing just use background-image,background-size like shown below..

background-image: url(../images/page1_img1.png);

background-repeat: no-repeat;
background-size: 50% 50%;


similarly have #two and #three…you can see side by side divs with images fixed to it..if you resize window..automatically all divs and its images will be resized. if you wanna have it in fluid layout..use width as %’s. Thats it 🙂

Wanna have sticky header??

#navigation {

position: fixed;

z-index: 10;


#header {

margin-top: 50px;


Note: Always use this for better look without some gutter space around your website..

margin: 0 auto;

CSS Media Queries

Types of media types:


@media <media-query> { /* media-specific rules */ }

A <media-query> is composed of a media type and/or a number of media features.

Media types

Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
Suitable for all devices.
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
Intended primarily for color computer screens.
Intended for speech synthesizers. Note: CSS2 had a similar media type called ‘aural’ for this purpose. See the appendix on aural style sheets for details.


1. <meta name=”viewport” content=”user-scalable=no,width=device-width, minimum-scale=1, maximum-scale=1″ />


this means we are telling to the browser “my website adapts to your device width”


This define scale the website, This parameter sets the initial zoom level, which means if 1 CSS pixel is equal to 1 view port pixel. This parameter help to when you changing orientation mode, or preventing a default zooming. without this parameter responsive site work.


Maximum-scale define maximum zoom. When you access website top priority is maximum-scale=1 won’t allow the user to zoom.


Minimum-scale define minimum zoom. this work same as above but define minimum scale. If you not define this its work without using this is useful when maximum scale is large and you want to set minimum scale that time you can use.


User-scalable assign 1.0 means website allow to zoom in or zoom out.

But if you assign User-scalable=no its means website not allow to zoom in or zoom out.

10-10-2014 13-06-08



2.<link rel=stylesheet media=(max-width: 800px) href=example.css />

3. Add media type with screen/all/speech/print with following syntax

Eg: media all

@media all and (min-width: 1001px) {

#sidebar ul li a:after {

content: ” (“ attr(data-email) “)”;

font-size: 11px;

font-style: italic;

color: #666;



4. similarly for screen

@media only screen and (min-width: 768px) and (max-width: 1024px) {


@media only screen and (max-width: 766px) {


@media only screen and (max-width: 360px)


@media screen and (max-width : 479px) {


@media only screen and (min-width: 480px) and (max-width: 766px) {
#slide6 {padding-top:123px;background:url(../images/contact_block_bg.jpg) repeat left top;}


5. Even we can have orientation landscape/ portrait like below

@media only screen and (max-width: 1024px) and (orientation:portrait){
.slide{background-attachment: scroll;background-position:0 0 !important;


@media only screen and (max-width: 1024px) and (orientation:landscape){
.slide{background-attachment: scroll;background-position:0 0 !important;