Agility in Web Design & Development
-
Upload
ahmed-alshair -
Category
Design
-
view
56 -
download
1
Transcript of Agility in Web Design & Development
![Page 1: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/1.jpg)
Agility in Web Design & Development
Ahmed AlShair
![Page 2: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/2.jpg)
What is Agility?
• To do things fast and in the min. number of steps.
• Wide capability to edit or re-shape your work easily.
![Page 3: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/3.jpg)
Why Agility?
• Because TIME is the largest obstacle in web design and development tasks!
![Page 4: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/4.jpg)
Agility in
Pre-Design Stage
Assets Design Stage
Coding Stage
+ A nice Trick for Web Pages Transition
![Page 5: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/5.jpg)
Pre-Design Stage
• Think First !
• Use Your Pen..
• Choose the Right WorkSpace
![Page 6: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/6.jpg)
Design Stage
• Use The Right Tools !
Photoshop:
• Generator
• Automate-Batch
![Page 7: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/7.jpg)
Generator Syntax
200x500 Image_name.png -92%
35cmx70cm Image_name.jpg 80%
60% folder/Image.png
150% img1.gif,img2.jpg
Size Name Quality
125mmx? img1.gif,img2.jpg
![Page 8: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/8.jpg)
Coding Stage
• Choose the Right Code Editor!
Fast Review
on Brackets
![Page 9: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/9.jpg)
Coding Stage
• Create your own Frameworks and Libraries
• Consider Easy maintenance while coding
![Page 10: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/10.jpg)
Page Transitions
• How to make web pages transition elegant and unique?
![Page 11: Agility in Web Design & Development](https://reader034.fdocuments.us/reader034/viewer/2022042906/58a811a51a28ab3d6e8b6a35/html5/thumbnails/11.jpg)
Thank You
Feel Free to Ask !