Mobile Themes and Templates
Silk UI Overview
This lesson is part of the Mobile for OutSystems Developers course.

Welcome to the Silk UI Overview session. In this session the topics that we'd like
to discuss are: what is Silk UI and look at its definition and principles, take a
quick look at the Silk UI Web site to see some of the information that is
available there and then discuss some of the details about the Silk UI themes
and the Silk UI patterns. So let's go ahead and get started. Silk UI is a codeless
UI framework and here you can see that it's available on mobile devices
and it creates the look-and-feel and enables us to quickly create great
user interfaces and those user interfaces can be targeted to particular
devices, so here you can see that a task manager app is on the phone with a set
of lists and other types of things and the same thing is available on the
tablet and it adapts and changes to the look-and-feel depending on the type of
device. So Silk UI is this framework that is available for both mobile and Web
apps. So if we try to define it specifically, Silk UI is a codeless UI
framework that enables developers to quickly create amazing user interfaces
with pre-built patterns and samples and you can simply drag and drop these
patterns set some properties and go ahead and create them. Now Silk UI was
created because inside of the OutSystems servers, when we do
development, we want things to be highly productive and we want things to be,
to look, as good as possible and be easy to work with,
so the principles that were designed into Silk UI were that the UI had
to look great,
it had to perform really well, and it had to follow the best practices of user
interface design and how things work.
And while doing all of those things it had to be easy for developers to use and
allow us to create overall great user interfaces and do it really quickly. So
those were the principles that Silk UI were built upon. Now to learn more about
Silk UI, the quickest and easiest place to get more info is our Web site,
and to get to the Silk UI website you can go to and
it's broken up into a couple areas: there's a home area, there's an area to
show off the templates, some of the samples of what Silk UI can do, the
patterns, and a getting started area. So we'll talk about each one of these areas
in a little more detail. So the home basically gets to give us an overview of
what's there and discuss how different parts of mobile apps and Web apps have
been set up for Silk UI to go ahead and help us create those types of apps
quickly. There's also a template area and the template area shows us the different
types of templates that are available, and there are mobile templates like the
phone and the tablet template and then there are different types of Web
templates. So here we can see the phone and for the template we follow some
sort of theme so we have a phone theme and a tablet theme and then we have for
the Web different types of Web sites or look-and-feel, so here we have a Lisbon
Web site and we give some of the Web themes different types of city names, so
here we have a Dublin that has a nice left-hand nav and the Liverpool that has
red and black across the top, so a number of different themes that are available
to work with. And then besides the themes which help define the overall screen,
what we put inside of the screen, like the smaller components that are
available, are referred to as patterns,
and those patterns are reusable and customizable elements that we can work
with, and we'll look at a number of those. So when we think of Silk UI obviously
having a big look-and-feel is great but having all of those patterns that are
reusable patterns,
how did we come up with what those patterns should be? So to determine what
patterns should be the different types of reusable components, we went out and
looked at 70 of the most popular apps in the world and in evaluating those 70
most popular apps in the world what we found is that 84% of all
of the components on those apps were actually very reusable and noticeable
types of components. So inside of OutSystems we created a number of those as
built-in widgets, and what we also call composite patterns. So the composite
patterns are a little bit larger components and the 20 built-in widgets
are more fundamental building blocks, but with these 20+ and 50+
widgets and patterns more than 80% of the Web sites and the apps
would have been built with these types of components. So if Silk UI can provide
these and we can build them by dragging and dropping and configuring them very
quickly, then we'll be able to build a huge amount of the functionality that is
expected very quickly and very easily. So if we think about mobile apps and we
break down some of the things that we might see inside of a mobile screen, there
are different areas like headers, sometimes there's a card that shows off
different information in an area and it might have some sort of background image,
sometimes with multiple images that can be swiped and that is referred to as a
carousel, we might have some icons available with some buttons and things
near the bottom bar,
and we may have counters that are showing us the different types of information
that's available. So mobile apps can be broken into the smaller components and
these smaller components are what we refer to as those patterns. So there are a lot
of different mobile patterns,
we're not going to go through all of these now, we'll have a chance to look at these
more, but if you go to the Web site, each one of these is, there is an example of
how each one of these works, a description and the picture of how it
actually works. So going to the Web site will give you the details that you might
be interested in when you're looking at using some of these types of patterns.
There are also patterns for the Web apps. And when you break up a Web site and you
look at what's available,
it may be a little bit different as far as having sort of a bar at the top with
different tiles and panels that can have charts and other types of things inside
of them, but in general we still would be able to break sites up into different
types of standard patterns and components. So there are set of Web
patterns and again each one of these is a link that is documented with examples
and other types of information of those patterns. So with all of those patterns,
we've now seen the templates and the patterns, we may want to see some
of these things actually working. So there is a large number of sample apps
and sample pages and when you're looking for more information you can go out and
select one of the samples and it will show you those types of patterns or
themes and information that is available on those particular types of samples.
So there are over 50 samples just in the mobile side with the phone and the
tablet, and there are also quite a few for the Web apps. And then finally we
have the getting started area. And inside of the getting started area there is a
place to be able to download the different themes and templates that you
may need or wish to use and there's also a frequently asked questions section
where you can look at more information about how the different patterns might
work, how you can use them in development, or how you can support and maintain the
latest versions of Silk UI. So in this session we tried to define what Silk UI is
as far as a framework to allow us to create great interfaces, we showed you
the Web site where you can go and get the most information and see all of the
different components, we described the themes and the patterns in a little bit
of detail so that you know where to go and and find those different types of
patterns. So hopefully this gets you started and makes you feel a little bit
more comfortable. Please go to the Web site and view more of the information
about Silk UI.