1.

ORGANIZATIONAL DETAILS

ENIGMA EXPERTS:
Enigma helps customers do business better by leveraging our industry-wide
experience, deep technology expertise, comprehensive portfolio of services and
vertically aligned business model. Enigma is based on delivering business value
and its commitment to sustainability. Enigma champions optimized utilization of
natural resources, capital and talent. Today we are a trusted partner of choice for
global businesses and start up's looking to differentiate at the front
and standardize at the core through technology interventions.

Enigma aim to create an enterprise with a team that takes pride in delivering
innovative IT solutions, thereby bringing values to it's customers and returns to its
shareholders.

WEBSITE : www.enigmaexperts.org

1
 2. INTRODUCTTION TO UI/UX
UX Design refers to the term User Experience Design, while UI Design stands
for User Interface Design. Both elements are crucial to a product and work closely
together. But despite their professional relationship, the roles themselves are quite
different, referring to very different parts of the process and the design discipline.
Where UX Design is a more analytical and technical field, UI Design is closer to what
we refer to as graphic design, though the responsibilities are somewhat more complex.

There is an analogy I like to use in describing the different parts of a (digital) product:

If you imagine a product as the human body, the bones represent the code which give
it structure. The organs represent the UX design: measuring and optimizing against
input for supporting life functions. And UI design represents the cosmetics of the
bodyits presentation, its senses and reactions.

What is User Experience Design?

User experience design is a human-first way of designing products. You can learn
more about how were promoting human-first design across all industries over at
The UX SCHOOL.

As is found on Wikipedia:

User experience design (UXD or UED) is the process of enhancing

customer satisfaction and loyalty by improving the usability, ease of use, and
pleasure provided in the interaction between the customer and the product.

Clear, right? Well you might note immediately that despite what I implied in the
introduction, the definition has no reference to tech, no mention of digital, and
vague at best. But like all professions, its impossible to distill the process from
just a few words.

2
Some confusion in the definition of the term itself is due to its youth. Don Norman,
a cognitive scientist and co-founder of the Nielsen Norman Group Design
Consultancy, is credited with inventing the term in the late 1990s declaring that
User experience encompasses all aspects of the end-users interaction with the
company, its services, and its products.

This implies that regardless of its medium , UX Design encompasses any and all
interactions between a potential or active customer and a company. As a scientific
process it could be applied to anything, street lamps, cars, Ikea shelving and so on.
In the video below, we pit a banana against a pineapple to demonstrate this point.

However! Despite being a scientific term, its use since inception has been almost
entirely within digital fields; one arguable reason for this being that the industry
started blowing up around the time of the terms invention. Another arguable
reason being that it was just a fancy way of rewording a practice that has already
existed for hundreds of years known as Market Research; and boy do designers
love fancy.

But dont let me confuse you, User Experience Design is not a market research
job.

Though it does utilize many of the same techniques to achieve a complex end goal:
The structure, analysis and optimization of a customers experience with a
company and its products.

If youve never seen User Experience work in practice, never even used the term at
work, its still difficult to imagine what User Experience Designers actually do. At
CareerFoundry weve developed a UX course that focuses on the process which I
will use to illustrate the profession.

3
Here is a cliff notes example of a UX Designers responsibilities as laid out by our
course. It is targeted at development of digital products, but the theory and process
can be applied to anything:

Strategy and Content:

Competitor Analysis
Customer Analysis
Product Structure/Strategy
Content Development

Wireframing and Prototyping:

Wireframing
Prototyping
Testing/Iteration
Development Planning

Execution and Analytics

Coordination with UI Designer(s)

Coordination with Developer(s)
Tracking Goals and Integration
Analysis and Iteration

So part marketer, part designer, part project manager; the UX role is complex,
challenging and multi-faceted. You see that iteration of the product, as connected
to analysis or testing is indeed mentioned twice, but in reality you would put it in
between every other item on the list. Ultimately the aim is to connect business
goals to users needs through a process of testing and refinement to that which
satisfies both sides of the relationship.

So in conclusion:

4
 User Experience Design is the process of development and improvement of
quality interaction between a user and all facets of a company.
User Experience Design is responsible for being hands on with the process
of research, testing, development, content, and prototyping to test for quality
results.
User Experience Design is in theory a non-digital (cognitive science)
practice, but used and defined predominantly by digital industries.

The lesson to be learned here, is that if youre interested in sociology, in cognitive

science, in people and in great products, User Experience is a good place to be; but
if you understand those principles and are more visually inclined, you might look
at its brother-in-arms: User Interface Design.

What is UI Design?
Despite it being an older and more practiced field, the question of What is user
interface design? is difficult to answer by its ranging variety of
misinterpretations. While User Experience is a conglomeration of tasks focused on
optimization of a product for effective and enjoyable use; User Interface Design is
its compliment, the look and feel, the presentation and interactivity of a product.
But like UX, it is easily and often confused by the industries that employ UI
Designers. To the extent that different job posts will often refer to the profession as
completely different things.

If you look at job posts for User Interface Design, you will mostly find
interpretations of the profession that are akin to graphic design. Sometimes
extending also to branding design, and even front end development.

If you look at expert definitions of User Interface Design, you will mostly find
descriptions that are in part identical to User Experience design. Even referring to
the same structural techniques.

5
So which one is right? The sad answer is: Neither

But both are close in some ways. Like User Experience Design, User Interface
Design is a multi-faceted and challenging role. It is responsible for the transference
of a products development, research, content and layout into an attractive,
guiding and responsive experience for users. It is also a field that unlike UX, is a
strictly digital profession, as per its dictionary definition:

Use rinterface noun Computing the means by which the user and a computer
system interact, in particular the use of input devices and software.

We explain in much greater detail what the definition and role of UI Design is, as
well as teach you the skills required to become a UI designer in the Career Founry
UI Design Course. This includes its relationship to brand, graphic/visual, and
front-end design.

Regardless of whether you choose UX design or UI design, its important to

understand how the other one works and, crucially, how to work with them.

Lets have a quick look at the UI designers responsibilities:

Look and Feel:

Customer Analysis
Design Research
Branding and Graphic Development
User Guides/Storyline

Responsiveness and Interactivity:

UI Prototyping
Interactivity and Animation
Adaptation to All Device Screen Sizes
Implementation with Developer
6
As a visual and interactive designer, the UI role is crucial to any digital interface
and for customers a key element to trusting a brand. While the brand itself is
never solely the responsibility of the UI designer, its translation to the product
is.

Youll also note the final point which states a responsibility for implementation
of the design with a developer. While this is generally how UI jobs have worked in
the past, you should be aware that the lines are blurring, as the term Web
Designer (essentially a UI designer who can code) is being replaced by expertise
of User Interface Designers. While UX has no need for coding, UI is a role that as
time progresses, will rely on it as part of building interactive interfaces.

So in conclusion:

User Interface Design is responsible for the transference of a brands

strengths and visual assets to a products interface as to best enhance the
users experience.
User Interface Design is a process of visually guiding the user through a
products interface via interactive elements and across all sizes/platforms.
User Interface Design is a digital field, which includes responsibility for
cooperation and work with developers or code.

Or in analogical terms, UI design produces a products: Skin - a products

visual/graphic presentation. Senses - a products reactivity and interactivity in
response to a users input or different display environments. And makeup - a
products guides, hints, and directives that visually leads users through their
experience.

7
 3. WEB DEVELOPMENT

Web development is a broad term for the work involved in developing a web
site for the Internet (World Wide Web) or an intranet (a private network). Web
development can range from developing the simplest static single page of plain
text to the most complex web-based internet applications (or just 'web
apps') electronic business, and social network services. A more comprehensive list
of tasks to which web development commonly refers, may include web
engineering, web design, web content development, client liaison, client-
side/server-side scripting, web server and network security configuration, and e-
commerce development. Among web professionals, "web development" usually
refers to the main non-design aspects of building web sites:
writing markup and coding. Most recently Web development has come to mean the
creation of content management systems or CMS. These CMS can be made from
scratch, proprietary or open source. In broad terms the CMS acts as middleware
between the database and the user through the browser. A principle benefit of a
CMS is that it allows non-technical people to make changes to their web site
without having technical knowledge.

For larger organizations and businesses, web development teams can consist of
hundreds of people (web developers) and follow standard methods like Agile
methodologies while developing websites. Smaller organizations may only require
a single permanent or contracting developer, or secondary assignment to related
job positions such as a graphic designer or information systems technician. Web
development may be a collaborative effort between departments rather than the
domain of a designated department. There are three kinds of web developer

8
specialization : front-end developer, back-end developer, and full stack developer.
Front-end developers deal with the layout and visuals of a website, while back-end
developers deal with the functionality of a website. Back-end developers will
program in the functions of a website that will collect data.

Practice Web Development:

In practice, many web developers will have basic interdisciplinary skills / roles,
including:

Graphic design / web design.

Information architecture and copywriting / copyediting
Mobile responsiveness

The above list is a simple website development hierarchy and can be extended to
include all client side and server side aspects. It is still important to remember that
web development is generally split up into client side coding, covering aspects
such as the layout and design, and server-side coding, which covers the website's
functionality and back-end systems.

Front End Developer :

Front end developers use HTML, CSS, and JavaScript to code the website and web
app designs created by web designers. The code they write runs inside the users
browser (as opposed to a back end developer, whose code runs on the web server).
Think of it a little like this: the back end developer is like the engineer who designs
and creates the systems that make a city work (electricity, water and sewer, zoning,
etc.), while the front end developer is the one who lays out the streets and makes
sure everything is connected properly so people can live their lives (a simplified

9
analogy, but you get the rough idea). Theyre also in charge of making sure that
there are no errors or bugs on the front end, as well as making sure that the design
appears as its supposed to across various platforms and browsers.

Full Stack Developer :

1. Server, Network, and Hosting Environment.
A. This involves understanding what can break and why, taking no resource for
granted.
B. Appropriate use of the file system, cloud storage, network resources, and an
understanding of data redundancy and availability is necessary.
C. How does the application scale given the hardware constraints?
D. What about multi-threading and race conditions? Guess what, you wont see
those on your development machine, but they can and do happen in the real
world.
E. Full stack developers can work side by side with DevOps. The system
should provide useful error messages and logging capabilities. DevOps will
see the messages before you will, so make them count.
2. Data Modeling
A. If the data model is flawed, the business logic and higher layers start to need
strange (ugly) code to compensate for corner cases the data model doesnt
cover.
B. Full stack developers know how to create a reasonably normalized relational
model, complete with foreign keys, indexes, views, lookup tables, etc.
C. Full stack developers are familiar with the concept of non-relational data
stores and understand where they shine over relational data stores.

10
3. Business Logic
A. The heart of the value the application provides.
B. Solid object oriented skills are needed here.
C. Frameworks might be needed here as well.
4. API layer / Action Layer / MVC
A. How the outside world operates against the business logic and data model.
B. Frameworks at this level should be used heavily.
C. Full stack developers have the ability to write clear, consistent, simple to use
interfaces. The heights to which some APIs are convoluted repel me.
5. Understanding what the customer and the business need.
A. Now we are blurring into the line of architect, but that is too much of a
hands off role.
B. Full stack developers have a grasp of what is going on in the field when the
customer uses the software. They also have a grasp of the business.

11
 4. FRONT END DEVELOPMENT

Front end developers use HTML, CSS, and JavaScript to code the website and web
app designs created by web designers. The code they write runs inside the users
browser (as opposed to a back end developer, whose code runs on the web server).
Think of it a little like this: the back end developer is like the engineer who designs
and creates the systems that make a city work (electricity, water and sewer, zoning,
etc.), while the front end developer is the one who lays out the streets and makes
sure everything is connected properly so people can live their lives (a simplified
analogy, but you get the rough idea). Theyre also in charge of making sure that
there are no errors or bugs on the front end, as well as making sure that the design
appears as its supposed to across various platforms and browsers.

HTML :
Hypertext Markup Language (HTML) is the standard markup language for
creating web pages and web applicatqions. With Cascading Style Sheets(CSS) and
JavaScript it forms a triad of cornerstone technologies for the World Wide Web.
Web Browsers receive HTML documents from a web server or from local storage
and render them into multimedia web pages. HTML describes the structure of a
web page semantically and originally included cues for the appearance of the
document

HTML elements are the building blocks of HTML pages. With HTML constructs,
images and other objects, such as interactive forms, may be embedded into the
rendered page. It provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes and
12
other items. HTML elements are delineated by tags, written using angle brackets.
Tags such as <img /> and <input /> introduce content into the page directly.

Others such as <p>...</p> surround and provide information about document text
and may include other tags as sub-elements. Browsers do not display the HTML
tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as

JavaScript which affect the behavior and content of web pages. Inclusion of CSS
defines the look and layout of content. The World Wide Web Consortium (W3C),
maintainer of both the HTML and the CSS standards, has encouraged the use of
CSS over explicit presentational HTML since 1997.

CSS (CASCADING STYLE SHEETS):

CSS Rules

CSS rules are made up of a selector and at least one declaration. A selector is the
code that selects the HTML to which you want to apply the style rule. We'll be
focusing on common selectors in this tutorial, but you can use more than a dozen
selector types as you become more proficient at CSS. A declaration is made up of
at least one CSS property and related property value. CSS properties define the
style:

h1 {color: red;}

The H1 is the selector for your h1 headers, and the declaration is made up of the
color property with a value of red. Simply said, this rule turns all H1 elements red.

13
 You'll note that the syntax of the style rule looks different from what you've seen
in HTML. The curly braces contain the declarations, each property is followed by a
colon, and a semicolon is used after each property. You can have as many
properties as you want in a rule.

Applying CSS

Six types of style sheets exist:

Browser style This is the default style sheet within a browser. If you declare no style
rules, these defaults are applied.

User style A user can write a style sheet and make it override any styles you create
by changing a setting in the browser. These are used infrequently but can be helpful
for individuals with special needs, such as low vision. In such a case, the user will
create high-contrast, large-font styles that override your own.

Inline style This is style that is used right in the individual element and applied via
the style attribute. It can be very useful for one-time styles by element, but it isn't
considered ideal.
Embedded style This is style that controls one document and is placed inside the
style element within the HTML document.
Linked style This is a style sheet that is linked to an HTML document using the
link element in the head of the document. Any document linked to this style sheet
gets the styles, and here's where the management power of CSS is found.

14
 Imported style This is similar to linked styles, but it enables you to import styles into
a linked style sheet as well as directly into a document. This is useful in
workarounds and when managing many documents.

You'll see examples of these style sheets as we progress throughout the tutorial.

The Cascade

People often wonder where the term cascading comes from. The cascade is an
application hierarchy, which is a fancy term for a system of how rules are applied.
If you examine the five types of style sheets just introduced, you'll notice that there
are numerous means of applying style to the same document.

What if I've got an inline style, an embedded style sheet, and a linked style sheet?
The cascade determines how the rules are applied. In the case of style sheet types,
user style overrides all other styles; inline style trumps embedded, linked, and
imported styles; embedded style takes precedence over inline style; and linked and
imported styles are treated equally, applying everywhere any of these other style
sheet types are not applied. Browser style comes into play only if no style for a
given element is provided; in that case, the browser style is applied.

The cascade also refers to the manner in which multiple style sheets are applied. If
you have three linked style sheets, the one on the bottom is the one that is
interpreted if any conflicts exist among those styles.

15
Inheritance

Inheritance means that styles are inherited from their parent elements. Consider the
following:

<body>

<h1>My header</h1>

<p>Subsequent Text</p>

</body>

Both the h1 and p elements are considered children of the body element. The styles
you give to the body will be inherited by the children until you make another rule
that overrides the inherited style. Not all properties, such as margins and padding,
are inherited in CSS but almost all others are.

Specificity

Finally, if there are conflicts within any of your style sheets that aren't resolved by
the cascade, CSS has an algorithm that resolves the conflict. This algorithm is
based on how specific a rule is. It's a bit heavy for this discussion but worthy of
mention. Obviously, two pages can't really do justice to any of these topics, so if
you're interested in learning more, be sure to look at the Additional Resources
section.

16
BOOTSTRAP :
Bootstrap is a free and open-source front-end web framework for
designing websites and web applications. It contains HTML and CSS based design
templates for typography, forms, buttons, navigation and other interface
components, as well as optional JavaScript extensions. Unlike many web
frameworks, it concerns itself with front-end development only.

FEATURES :

Bootstrap 3 supports the latest versions of the Google Chrome, Firefox, Internet
Explorer, Opera, and Safari (except on Windows). It additionally supports back
to IE8 and the latest Firefox Extended Support Release (ESR).

Since 2.0, Bootstrap supports responsive web design. This means the layout of web
pages adjusts dynamically, taking into account the characteristics of the device
used (desktop, tablet, mobile phone).

Starting with version 3.0, Bootstrap adopted a mobile first design philosophy,
emphasizing responsive design by default.

The version 4.0 alpha release added Sass and flexbox support.

STRUCTURE AND FUNCTION:

Bootstrap is modular and consists of a series of Less stylesheets that implement the
various components of the toolkit. These stylesheets are generally compiled into a
bundle and included in web pages, but individual components can be included or
removed. Bootstrap provides a number of configuration variables that control
things such as color and padding of various components.

17
Since Bootstrap 2, the Bootstrap documentation has included a customization
wizard which generates a customized version of Bootstrap based on the requested
components and various settings.

As of Bootstrap 4, Sass is used instead of Less for the stylesheets.

Each Bootstrap component consists of an HTML structure, CSS declarations, and

in some cases accompanying JavaScript code.

Grid system and responsive design comes standard with an 1170 pixel wide grid
layout. Alternatively, the developer can use a variable-width layout. For both
cases, the toolkit has four variations to make use of different resolutions and types
of devices: mobile phones, portrait and landscape, tablets and PCs with low and
high resolution. Each variation adjusts the width of the columns.

18
 5. RESPONSIVE WEB DESIGNS

Responsive Web design is the approach that suggests that design and development
should respond to the users behavior and environment based on screen size,
platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and an
intelligent use of CSS media queries. As the user switches from their laptop to
iPad, the website should automatically switch to accommodate for resolution,
image size and scripting abilities. In other words, the website should have the
technology to automatically respond to the users preferences. This would
eliminate the need for a different design and development phase for each new
gadget on the market.

The Concept Of Responsive Web Design:

Ethan Marcotte wrote an introductory article about the approach, Responsive Web
Design, for A List Apart. It stems from the notion of responsive architectural
design, whereby a room or space automatically adjusts to the number and flow of
people within it:
Transplant this discipline onto Web design, and we have a similar yet whole new
idea. Why should we create a custom Web design for each group of users; after all,
architects dont design a building for each group size and type that passes through
it? Like responsive architecture, Web design should automatically adjust. It
shouldnt require countless custom-made solutions for each new category of users.
Obviously, we cant use motion sensors and robotics to accomplish this the way a
building would. Responsive Web design requires a more abstract way of thinking.

19
However, some ideas are already being practiced: fluid layouts, media queries and
scripts that can reformat Web pages and mark-up effortlessly (or automatically).
But responsive Web design is not only about adjustable screen resolutions and
automatically resizable images, but rather about a whole new way of thinking
about design. Lets talk about all of these features, plus additional ideas in the
making.

Adjusting Screen Resolution:

With more devices come varying screen resolutions, definitions and orientations.
New devices with new screen sizes are being developed every day, and each of
these devices may be able to handle variations in size, functionality and even color.
Some are in landscape, others in portrait, still others even completely square. As
we know from the rising popularity of the iPhone, iPad and advanced smartphones,
many new devices are able to switch from portrait to landscape at the users whim.
How is one to design for these situations?

20
In addition to designing for both landscape and portrait (and enabling those
orientations to possibly switch in an instant upon page load), we must consider the
hundreds of different screen sizes. Yes, it is possible to group them into major
categories, design for each of them, and make each design as flexible as necessary.
But that can be overwhelming, and who knows what the usage figures will be in
five years? Besides, many users do not maximize their browsers, which itself
leaves far too much room for variety among screen sizes.

PART OF THE SOLUTION:

FLEXIBLE EVERYTHING
A few years ago, when flexible layouts were almost a luxury for websites, the
only things that were flexible in a design were the layout columns (structural
elements) and the text. Images could easily break layouts, and even flexible
structural elements broke a layouts form when pushed enough. Flexible designs

21
werent really that flexible; they could give or take a few hundred pixels, but they
often couldnt adjust from a large computer screen to a netbook.
Now we can make things more flexible. Images can be automatically adjusted, and
we have workarounds so that layouts never break (although they may become
squished and illegible in the process). While its not a complete fix, the solution
gives us far more options. Its perfect for devices that switch from portrait
orientation to landscape in an instant or for when users switch from a large
computer screen to an iPad.
In Ethan Marcottes article, he created a sample Web design that features this
better flexible layout:

The entire design is a lovely mix of fluid grids, fluid images and smart mark-up
where needed. Creating fluid grids is fairly common practice, and there are a
number of techniques for creating fluid images:

22
 Hiding and Revealing Portions of Images
Creating Sliding Composite Images
Foreground images that scale with the layout
For more information on creating fluid websites, be sure to look at the book
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS by Zoe
Mickley Gillenwater, and download the sample chapter Creating Flexible
Images. In addition, Zoe provides the following extensive list of tutorials,
resources, inspiration and best practices on creating flexible grids and layouts:
Essential Resources for Creating Liquid and Elastic Layouts.

FLEXIBLE IMAGES:
One major problem that needs to be solved with responsive Web design is working
with images. There are a number of techniques to resize images proportionately,
and many are easily done. The most popular option, noted in Ethan Marcottes
article on fluid images but first experimented with by Richard Rutter, is to use
CSSs max-width for an easy fix.
img { max-width: 100%; }
As long as no other width-based image styles override this rule, every image will
load in its original size, unless the viewing area becomes narrower than the
images original width. The maximum width of the image is set to 100% of the
screen or browser width, so when that 100% becomes narrower, so does the image.
Essentially, as Jason Grigsby noted, The idea behind fluid images is that you
deliver images at the maximum size they will be used at. You dont declare the
height and width in your code, but instead let the browser resize the images as
needed while using CSS to guide their relative size. Its a great and simple
technique to resize images beautifully.

23
Note that max-width is not supported in IE, but a good use of width: 100%would
solve the problem neatly in an IE-specific style sheet. One more issue is that when
an image is resized too small in some older browsers in Windows, the rendering
isnt as clear as it ought to be. There is a JavaScript to fix this issue, though, found
in Ethan Marcottes article.
While the above is a great quick fix and good start to responsive images, image
resolution and download times should be the primary considerations. While
resizing an image for mobile devices can be very simple, if the original image size
is meant for large devices, it could significantly slow download times and take up
space unnecessarily.

24
 6. PROJECTS

1. VALE TECHNOLOGIES: Dynamic website development completed using

bootstrap framework.(Client Based Project)
Duration: 9th June-15th June.

2. THE SIXTHELEMENT & ENIGMAEXPERTS(IN-HOUSE): Duration: 2

Weeks

3. ADBOT/THINKSTRAWBERRIES/NORWALK BLOG TEMPLATE: These

website designs was prepared for better understanding of the technology and
dynamic web applications.

25
7. CONCLUSION

26