"Graphic Design Briefing Tutorial" by Moalla Ilani

 For Developers who need to build an astonishing design for their apps, but don't have an idea about professional Graphic Design tools, and for the artist Graphic Designers who don't have an idea on how to implement their arts to visual studio or MS Blend, I wrote this straight to point tutorial.

My experience with graphic design lasted for more than 5 years, I have trained myself on Adobe software, got internship at printing companies and now having a great chemistry combination between developing and designing apps. Hope you all get benefit of this experience and share it!

Very Basics How to make the best design for your application, using Adobe Photoshop, Adobe Illustrator, and MS Blend.

All Microsoft's Modern design guidelines for Windows 8 and Windows Phone can be found on design.windows.com and dev.windowsphone.com/en-us/design

Start a new windows phone or windows 8 project on visual studio, in the solution explorer create a new folder and name it "images" or any name to keep your project neat, and all your design elements will be added in this folder.

Visual Studio supports Design elements/images of *.JPEG, *.PNG, *GIF extensions. I usually use *.JPEG for backgrounds, which provides compressible images with better quality. And *.png for elements and icons that can be circle or any shape where it's required to have a transparent
background. *.GIF extensions usually used in web applications, where the element can be animated.

 

Going back now to graphic design tools, if you are seeking for vector graphics editor "Cartoonish, hand drawn objects" Adobe Illustrator is the right tool for you. Using AI you could either draw whatever vector you want to add to your app, from buttons, shapes, notification bar, house, your character… or you can get/buy ready samples from internet and use or edit them to best fits what is in your mind.

Trick: go to www.bing.com, search for web buttons vector ai, choose the best button that fits your app and download it as illustrator file *.ai

 Trick of search engine: ("name of object you need" + vector ai)

 Other Graphics sources: https://www.freshwap.me/graphics/

 Sample to download: https://all-free-download.com/free-vector/vector-web-design/sophisticated_web_page_design_elements_vector_161881.html

After your design is ready, if you are familiar with Adobe illustrator, save the vectors as *.png or *.jpg, and you are ready to take the design to next level at visual studio. Check how: https://help.adobe.com/en_US/illustrator/cs/using/WSB774257A-0C4E-4b60-87CD-1D0DA7B7D3C3a.html

Enough from Adobe illustrator, and going to Adobe Photoshop, a very simple software that helps you enhance or edit your photos. Using Photoshop, you can resize, cut and trim your artwork to fit your needs and the dimensions of windows phone/8 layout. If you are familiar with multi-tasking,
Adobe Photoshop can be a complimentary tool for Illustrator! You can simple create a new file on Photoshop with correct dimensions of platform, and drag vectors from illustrator and drop them on Photoshop, save them and implement in VS.

Dimensions: Windows phone 7 – 7.5 devices: 480 X 800 Pixels.

               
Windows Phone 8 and above: 768 X 1280 Pixels.

               
Windows 8: Depends on screen device you target, usually: 1366 X 768 Pixels.

Now after all your artwork is done, drag and drop all the elements to the Images folder in the Visual Studio we created before. And now you can use your artwork in your project.

Using Visual Studio, from toolbox pick up "Image" tool and implement it to space on screen of windows phone/8 platform. In this space we are using XAML which is responsible for the GUI of the application. You could either pick up objects from the list of tools or drag them to work space, or
write their XAML code, in our case Image: <Image Height="100" Width="100"/>

After adding Image to Interface, on your right side under Properties window, choose Common – Source – Choose Your Image.

That's basically all beginners from designers and developers need to start their well designed project, and astonish their customers. If anyone needs support/troubleshoot using these tools please share it in the comments below so all people get benefit from. Good luck!