web design software popular
hello friends! in this video i will talk about the top five most usedweb design frameworks. but first what is a framework? in theworld of web design a framework is a package made up of astructure of files and folders of standardized code in that those codefiles can be in html, css, javascript, or other documents and these can be usedto support the development of web sites and as a basis to start building a website. so basically
they lay the foundation of beginning a website. a framework allows you to have everything you need to begin. now i will talk about the, in my opinion, 5 most popular frameworksthat a lot of web designers and developers use.after that, i will demonstrate using one and perhapslater on i will talk... i will make more in-depth videosusing these frameworks. so let's begin! the first framework i will talk about is... twitter
bootstrap. bootstrap is a responsiveframework, it is open source so many people havebuilt upon it and improved it. and bootstrap has a variety of different templates to getyou started. it is full of features which include jquery plugins and uses sass, which is a css preprocessor that is faster to use then vanilla css and many people prefer it. you cancustomize what you download by choosing
just the components you need for your project or getting the wholepackage to experiment with it. bootstrap is verywell documented so if you have any questions, chances arethey are addressed on the site, if not, many people use this framework and there are a lot forums where it is a common topic. and here's thedownload link for you to visit if you're interested. the next frameworki'll talk about is... foundation 5 by zurb.
foundation is responsive and fast in that it loads quickly in a browser. itis open source, they have a selection of templates toget you started, it is based on a mobile-first design in that you design the site for mobilefirst and build it up from that to end up with afinished desktop site. this is to ensure that thesite is ready for any platform that is displayed on. you can customize your build
and choose the components you wantdownload for starting your project. this framework is also very welldocumented so all of the information on the framework is there if need it and you can download this framework at thisurl. the third web design framework is called... ui kit. this framework is responsive, mobile ready, and fast. it is open source. it has a customizer thatallows you to build your project with little to no css knowledge if youneed that.
it also has a good amount ofdocumentation for help on using its various features. you candownload this framework by visiting this site which also hosts the customizer. the next framework i will discuss is called... ink. thisframework is responsive so it is ready for anyplatform. it provides a selection of templates to get you started, it is very quick and easy to use and you can read it easily.
so it's useful for even a beginner webdesigner or developer. it is also very well documented so you have something to refer to if youwant to learn how to do something within theframework. this is the website to visit for moreinformation. the fifth framework i'll talk to you about iscalled gumby. gumby is responsive and ready for any platformor screen size. it is based on a grid system so you can
lay out your content any way that you want.it has a ui which stands for user interface kit to help your project look great and those elements can be changed of course if you are also a graphic designer and if you want to customize your siteeven more. gumby is also powered by sass. and it has many more features. you canchoose the features you want by customizing your build as well. it isalso very well documented and here is the url to visit if you wantdownload it.
as a bonus i'll talk about another one called semantic ui and this light framework uses easy tounderstand language to build web sites and here isan example of that in these pictures. bootstrap uses moredeveloper oriented syntax in naming the css classes used and semantic ui uses more user-friendly and easier tounderstand language as you can see in the diagram. semantic
ui has many components and themesto choose from and it has many unique features specific to semantic ui. it is alsovery well documented and i encourage you to give these frameworks a try. and here is thewebsite for more information. now i willdemonstrate downloading and using a framework. the framework iwill use is called foundation 5 which i discussedearlier. first what we'll do is visit the website todownload the framework.
you can either download their package orcustomize what you want. just click here to go to the download page. here you canchoose which you want. there is complete, essential, sass, or a custom build. these are the options for the custom package of foundation 5. once you have decided, download it and save it somewhere you want to work on your project. once you have downloaded it find whereyou saved it, extract the zip file.
and now you can begin working on yourproject from the foundation. if you'd like you can download a template. to do so, go back to the site and click here where it says htmltemplates. now choose one that fits your project. click on html and copy all the code go back to the folder that has thefoundation framework and open the index.html file in your favoritecode editor. i use brackets.
erase the code within the body tags andpaste the code you copied earlier. now save and preview the page. as you can see it is exactly like thetemplate looked and you know have a basis for your new project if you need it. now all you do iscustomize and make it yours. this is the basics of using a framework. of course, you don't need to use atemplate. but if you're beginning to learn how a framework works it is recommended. in the nextvideos
i will show you more in-depth usage of theframeworks i talked about throughout this video. now i will reviewsome of the key terms used throughout the video. first word is vanilla and this, besides being a flavorin food, it means the original version withoutanything added to it. components are things that make up a whole thing.for example the components of a cake would be theingredients that were put into it. forums are discussion boards based around acommunity
where you can ask questions and discussvarious topics. documentation is information that provides instructionsand explains a product or software. elements can be things that make upsomething else. a basis is the underlying support or foundation for an idea, argument, orprocess. a platform can be a standard for the hardware of a computer systemsuch as linux, macintosh, or windows. it can also be atype of device
such as a tablet, a phone, or a desktoppc. user interfaces are what we, as a user, interact with. this can be whatwe see when we use software and the graphic design elements it uses. open source is when the source codeof a project is free to modify and redistribute. mobile-first design is when you design a site or softwarefor a mobile platform first and build upon that to create thebigger version of it. so that's it for key terms!
i hope you enjoyed learning aboutframeworks in web design. see you next time!
Tidak ada komentar:
Posting Komentar