Basic Design for Developers. Ma. Andrea Drei R. Alquiros Design Team Lead, Lendsoft Solutions, Inc.

Size: px

Start display at page:

Download "Basic Design for Developers. Ma. Andrea Drei R. Alquiros Design Team Lead, Lendsoft Solutions, Inc."

Calvin Thomas
5 years ago
Views:

1 Basic Design for Developers Ma. Andrea Drei R. Alquiros Design Team Lead, Lendsoft Solutions, Inc.

2 What is a Designer? A designer is a person who designs.

3 Designs for what?! Graphics Designer UX Designer Product Designer Game Designer Fashion Designer Web Designer

4 ^ Basic Design for Developers ^ Sincerely, Ma. Andrea Drei R. Alquiros Design Team Lead, Lendsoft Solutions, Inc.

5 What the heck is Web Design?! Sincerely, Developers Ma. Andrea Drei R. Alquiros Design Team Lead, Lendsoft Solutions, Inc.

6 Graphics Designer Posters, billboards, etc. So, what is a web designer? Someone who designs for the web! + User Experience (UX) Designer + Usability, ease of use, etc. Front-end Developer HTML, CSS, JS, etc. Conclusion: Someone who designs and makes it work for the web.

7 Web design encompasses many different skills and disciplines in the production and maintenance of websites. Src:

8 Top Survey Answers What most of you think.

9 Design mo, code mo We should make our users/clients/bosses happy. Which part of design do you not understand the most? 1. What designers do everyday 2. Why it s important 3. Photoshop / other design tools I have no idea how to use this either! Choose and equip yourself with the tools that you need

10 Which part/s of design do you want to learn the most? 1. Responsive web design 2. Color Combination 3. Advanced CSS

11 Responsive Web Design In a nutshell

An approach that suggests that design and development should

Creating new small layouts out of large layouts Custom layouts

12 An approach that suggests that design and development should respond to the user s behavior and environment based on screen size, platform and orientation. Use of fluid grids Hiding and revealing portions of the website Creating new small layouts out of large layouts Custom layouts using media queries Detecting user agents using javascript / jquery Check out

13 Media Queries

14 Getting User Agents

15 Color Combination / Color Theory In a nutshell

16 Color theory encompasses a multitude of definitions, concepts and design applications - enough to fill several encyclopedias. Color theories create a logical structure for color. Primary: red, yellow, blue Secondary: green, orange, purple Tertiary: yellow-orange, red-orange, etc.

17 Combining colors into a design Dark colored navigation for emphasis Light colored text Active nav is lighter than background. Text is now darker than the highlight Background is lighter than all other element colors *When text is light, background should be dark *When text is dark, background should be light

18 Advanced CSS I ll try to make this as basic as possible.

:before & :after : ::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML) Syntax: div::after {

19 :before & :after : ::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML) Syntax: div::after { content: "hi"; } : ::before is exactly the same only it inserts the content before any other content in the HTML instead of after. Syntax: div::before { content: "hi"; }

20 :before & :after Values for each can be: A String: content: a string ; [special characters need to be encoded as unicode] An Image: content: url(/path/img.jpg); [image will use it s exact dimensions and cannot be resized] Nothing: content: ; [useful for clearfix] A counter: content: counter(li); [useful for styling lists] : VS :: All browsers support (::) double colon IE8 only supports (:) single colon

21 This is useful for long documents like: Terms & Conditions Privacy Policy Etc. It gets the <li> to work from 1, 1.1, 1.2, and so on

22 :first-child, :last-child :first-child selector allows you to target the first element immediately inside another element. :last-child selector allows you to target the last element directly inside its containing element.

23 Position Position value in CSS deals with layout and manipulating elements to be in your desired visual place. Values are: Static this is it s default state where left/right/top/bottom/z-index have no effect Relative this is it s original state, like static, except left/right/top/bottom/z-index do work Absolute Element is removed from the flow of the document (other elements will behave as if it's not even there). All the other positional properties work on it. Essentially you are able to declare the exact position you want the element to appear. Fixed Behaves almost exactly like an absolute element except it is unaffected by scrolling. It's usually used to provide a persistent visual element, like navigation bar that is always visible. Inherit this forces the element to inherit the value of it s parent class

24 Position

25 Visit: To know more about all the properties, selectors and pseudo-elements of CSS.

26 You already learned this I know, there s no arguing with them. They re my everyday issues tooo Most common design issues that you encounter in your everyday life. 1. CSS (:before & :after / :first-child) 2. Clients 3. Designers themselves Settle your differences for the good of the project.

es/phone There are also monthly events and meetups where you can join and learn new things: PWDO s miniffc is every 3 rd

27 Conclusion There are so much more things about Web Design (or design in general) that you can learn online There are also monthly events and meetups where you can join and learn new things: PWDO s miniffc is every 3 rd Wednesday of the month PH Javascript s meetups are also every 2 nd or 3 rd Friday of the month UX PH s meetups are every 2 nd or 3 rd Thursday of the month

28 Questions???

29 Thank you! And I hope you learned something! dreialq dreialquiros.wordpress.com

facebook.com/lendsoft https://www.facebook.com/epaydayuk https://www.

30 Also, if it s okay, you can like the following pages as well! s.org.ph

Frontend guide. Everything you need to know about HTML, CSS, JavaScript and DOM. Dejan V Čančarević

Frontend guide. Everything you need to know about HTML, CSS, JavaScript and DOM. Dejan V Čančarević Frontend guide Everything you need to know about HTML, CSS, JavaScript and DOM Dejan V Čančarević Today frontend is treated as a separate part of Web development and therefore frontend developer jobs are