Relative Paths

A relative path is a path that describes the location of a file or folder in relative to the current working directory. It can be best used to refer to websites that are located on the same domain, ideally on certain sections of websites in which the documents never change relationships to each other. Unlike absolute paths, relative paths contain information that is only relative to the current document within the same website.

Absolute Paths

An absolute path is a path that describes the location of a file or folder relative to the root directory. It contains the complete location of a file or directory. Absolute paths contain all the relevant information to find the resources indicated by an absolute URL. An absolute path must be used to refer to websites that are on a domain other than your home domain.

Why is it important?

Relative paths and absolute paths help you keep your website organized and structured properly.

Visuals

Resources: http://www.differencebetween.net/technology/difference-between-absolute-and-relative-path/

Definitions to help me understand:

root directory: is the top-level directory of a file system

• I’ve been working on a simple project. I have to create a website that has 3 columns, images, different fonts, a navigation bar, and just making the website look neat.
• The difficulties I’ve been facing are putting in the columns. The columns wouldn’t line up sometimes or they wouldn’t go the way I want it to go. The columns were what gave me the most trouble. I didn’t know how to put in a navigation bar but one google search and I got it.
• I feel like once I review everything, I have an idea on what I’m doing. Last year, I probably wouldn’t know where to start and how to do certain things like add different fonts. I’m kind of proud that my website is turning out okay.

4//19

Author: Paul Trani

• When it comes to setting up interactions for an entire site, it’s going to take time
• is potentially I have to go in and just continually hit Paste to make sure all of that content is linked up
• In fact, what you can do is you can just do a Select All, and you’ll see everything linking, but not quite everything is linking up
• Once you’ve built out your website or whatever prototype you’re making, you can preview it on your desktop.
• Right up here, you can see this little record button, just click record preview. Gives me this dot so I can actually show somebody how to navigate the website to point them down to Torreys Peak so they’re aware of this brand new page that I made.
• Name that whatever I want, in this case, saving that out, sure enough, it’s going to be an mp4. I can look on my desktop.
•  What you can also do is you can actually preview your content on a mobile device. You can see right up here, Device Preview.
• So essentially what I have going on is I have my iPhone connected.
• So this is just a preview in QuickTime. And I’m going to launch Adobe XD. All right. So it’s saying, hey, you want to connect to it? Sure, yes. I’m going to select yes. And it’s saying open up an Adobe XD document. I have one already open and look at what is already happening.
• I’m going to switch to this iPhone 6, 7, and 8 Plus. So I can automatically see, even as I toggle from Android to iPhone to this desktop screen, that it actually switches on my mobile device.
• So I can see how things look directly on a mobile device, make changes accordingly, and it really makes my life really easy. And all you really need is the XD mobile app. Connect it. What you can also do is put an XD file on your desktop and put in your Creative Cloud files folder and it will work that way.
• Super easy to preview content on your mobile device. And even if you disconnect it from USB, all of those items are cached so you can actually take it with you to show your clients.

4/12/19

Author: Paul Trani

• You can also use the repeating grid to repeat horizontally and vertically, making rows and columns.
•  Since this is a repeating grid, I can come to any one of these images, just by, say, double-clicking, selecting this image right here, and adjusting the transparency ’cause I really want to show these images.
• But I’m just showing you how you can not only expand things down but also horizontally and vertically to really make any page you want for any content that you want.
•  As you start creating multiple screens, what you end up doing are duplicating a bunch of elements.
•  your options are limitless when it comes to symbols, and they get to be invaluable as you start to create many, many screens
• So all I need to do is select that file, drag, and drop, and there’s my text. 

1. I already knew that you can add images just by dragging them in Adobe XD. I already knew that you can connect each page and apply different animations. I already knew that you can duplicate multiple elements with the repeating grid.
2. I learned that your options are limitless when it comes to symbols, and they get to be invaluable as you start to create many, many screens. I learned that you can also use the repeating grid to repeat horizontally and vertically, making rows and columns. I learned that as you start creating multiple screens, what you end up doing are duplicating a bunch of elements.
3. Can you let random people online to edit your design?

4/10/19

Author: Paul Trani

• Now, when it comes to creating multiple screens, it’s done really easily. They’re technically artboards.
• if I want to duplicate this artboard to make two screens, just go ahead and select Command + D, or Control + D if you’re on a PC.
• Another way of duplicate images is Option and Shift, and then when I drag, I’m duplicating that object.
• So right over here, you can see my artboard tool. Selecting it, I can come over here and I can draw out one at any size, okay, and I can change its size in my Properties panel
• Now when you’re designing a website you want to make sure the content fits it appropriately for the platform that it’s on.
• So that’s what you typically need to do when you’re going from different devices. They’re going to be different sizes definitely and you make to sure your content fits accordingly.
• I want to get something that works for each device that’s going to be a little different like that. The last thing is just moving these social media icons over and making sure that they’re large enough to be able to be clicked on.
• Now, when you are designing for mobile, you need to keep in mind that there’s going to be a status bar here, and essentially, how would you get that status bar and how would you get ahold of those UI kits
• I need to decide what needs to be there and what doesn’t.
• What we want to do is we want to make sure we keep the branding
• Now, typically, as you dive into screen design or website design, you often find yourself repeating multiple elements.
• selecting Repeat Grid will repeat whatever you have selected
• If you can select it, you can turn it into a repeating grid.

1. I already knew that selecting Repeat Grid will repeat whatever you have selected. I already knew that creating multiple screens are typically called artboards. I already knew that when you’re designing a website you want to make sure the content fits it appropriately for the platform that it’s on.
2. I learned that if you can select it, you can turn it into a repeating grid. I learne that another way of duplicate images is Option and Shift, and then when I drag, I’m duplicating that object.  I learned that we want to make sure we keep the branding.
3. When is it too much to be using the repeated grid?

 

4/8/19

Author: Paul Trani

• The first thing that will happen when you launch Adobe XD is you’ll be greeted by this splash screen.
• And as you select things using your select tool, it will give you the properties for it over in the right-hand side.
• Command plus and minus to zoom in and out.
• Command + 0 to fit to window
• go to File, Save and save it to the desktop
• When it comes to creating graphics in Adobe XD, it’s done pretty easily, just using these tools right over here in the toolbar.
• So I’m going to use an ellipse, okay? And I’m going to just click and hold on the shift key to drag, and that will constrain it. Otherwise, it’s going to get all distorted, and I want it to be a perfect circle. In fact, you can hold down the alt key, and it will draw out from the center from wherever you click.
• So the border’s going to be white, and I want to increase the size, so let’s just go, you know, I can type in two or I can use the arrow key.
•  So using the tools on the left, you can see how easy it is to create graphics in Adobe XD.
• To do that, just go to file, import. From there just go to the assets folder. If you have access to it, it really could be any graphics, as long as they’re SVG, I can select them here.
• To do that, just go to file, import. From there just go to the assets folder. If you have access to it, it really could be any graphics, as long as they’re SVG, I can select them here.
• So when I import vector graphics, I don’t need to go back out to another program to edit them, I can actually edit them right in Adobe XD.
•  You can also import bitmap or raster graphics into Adobe XD and there are a couple things you need to watch out for.
• Now, when it comes to animated GIF, it’s just going to bring in the first frames. That’s the first thing you need to watch out for. The second thing is the size. It’s going to bring in everything at half the size because it’s going to assume that you’re going to export everything at twice the size for high DPI devices.
• And once you bring it in, you can size it down any way you want. It’s going to be constrained which totally works. You can scale up from the center by holding down the alt or option key.
• just Open CC Libraries, you can drag in those images, whatever you want and not only that, you can also do an easy copy and paste if it’s a bitmap image.
• Opening up that Assets panel, you can see that there are character styles. So, what the assets panel does, is it can store all of the various information for your file, whatever you want to store.
• Well, you can right-click and you can select Edit.
• pretty awesome how you can use the Assets panel across multiple screens.
• There are also effects that you can add to text and graphics to really work in your favor.
• under Appearance, I can change the appearance.
• The B is going to be the blur effect.

1. I already knew that Adobe XD has properties similar to Photoshop and Illustrator.  I already knew that command plus and minus is to zoom in and out and command + 0 is to fit Window. I already knew that you can add images and gifs etc. into Adobe XD.
2. I learned that when it comes to animated GIF, it’s just going to bring in the first frames. I learned that opening up that Assets panel, you can see that there are character styles. I learned that there are also effects that you can add to text and graphics.
3. If I add a huge video file, will Adobe XD be able to handle it and play the video without slowing down?

4/4/19

Author: Paul Trani

• Once you have different screens designed for different devices, you want to be able to test these screens out on these appropriate devices as well.
• But I want to preview this on my actual device now, okay, so with this art board selected, right over here, you can see device preview. What’s happening here is I actually have my iPhone-connected and it’s recognizing that it’s connected. So on my phone, what I have going on is I have Adobe XD, so I’m gonna switch over to that screen, you can see it right here, I’m just kind of mirroring it on my desktop, you can see Adobe XD right here in the center.
• I’m gonna go ahead and select it to launch it. And you can see these XD documents which are in creative cloud files folder, but I’m gonna select live preview, which is that second button right there. Selecting that it recognizes that I have this document open.
• on an actual device, just connect it, it’s connected by USB, once it’s connected, it will recognize it here. Just make sure you have that Adobe XD preview app, and you’ll be well on your way to designing for these actual devices.
•  So I encourage you to use those UI kits and explore those other UI resources available in Adobe XD.
• I can have the design updated as you can see and not only that, I can reply to this and say fixed whatever you want to comment, and not only that can resolve these comments as well, tucks them away right in here and you can continue to refine this to your client’s specifications, you can actually have potential users test this out to make sure everything’s looking good and constantly update and refine your designs and your prototypes and when you’re ready the next step will be to hand off the assets and the design specs to the developer.
• Now there might be some cases where you need to record a video of your prototype
• Just click preview and right up here at the top, that’s the record button, clicking record and now it’s recording and showing me where I’m clicking. As I dive in to explore, it’s recording all of these interactions. Which is great, because I can record a video, maybe pointing the client to a specific area that might need to get worked on.
• Whatever the case is for you, all you need to do is hit stop, it will save that video.
• With Adobe XD you can share prototypes with a client, maybe some users, test it out, do everything you need to.
• But really you can actually also share content with developers using design specs. So these are the specifics that developers need in order to create this design.
•  I can select this icon, and then get exactly where it’s being positioned and then if I move off of it it will show me the distance it is from the thing to the right or the left or the edges essentially. So this is really essential when it comes to developing this particular project. This allows the developer to be successful so they can then program this website.
• Publishing, prototypes, as well as design specs,  are a couple ways to share your designs, but you can also export out screens and assets because this is very important being able to not only share the design specs but the actual graphical assets for the developer
• So just go to File, Export, All Artboards, that will obviously export out all of these artboards to the desktop.
•  You can send these graphics and the artboards to the developer and along with the design, specs link you should rest easy knowing the developer has everything they need to create the website or app with confidence.
•  First off, know that Adobe XD is constantly being updated on a regular basis, pretty much a monthly basis.

1. I already knew that once you have different screens designed for different devices, you want to be able to test these screens out on these appropriate devices as well. I already knew that Adobe XD is constantly being updated on a regular basis, pretty much a monthly basis. I already knew that you can send these graphics and the artboards to the developer and along with the design, specs link you should rest easy knowing the developer has everything they need to create the website or app with confidence.
2. I learned that publishing, prototypes, as well as design specs,  are a couple ways to share your designs, but you can also export out screens and assets. I learned that Adobe XD is constantly being updated on a regular basis, pretty much a monthly basis. I learned that there might be some cases where you need to record a video of your prototype.
3. Can you pause your video and play it again or will it cut off?

4/2/19

Author: Paul Trani

• prototyping means linking all the screens together with some interactivity.
• it might be kind of tricky dragging and pointing to these screens depending on how far away they are
• So typically for back buttons, if you click on it, you can say hey you know what? Instead of going to a specific artboard, just go to the previous artboard. It’s going to reverse the last used transition.
• command zero to view everything.
• command a to select all or control a
• this is a nice visual way just to see if I have everything connected correctly.
• Another popular interaction is having scrolling content, and that’ll be the case anytime you have a list or just a lot of content in general.
• Don’t forget, you can always fix the position for any element.
• when you click on this magnifying glass it should overlay really large, just a search field and then a button.
• I can design what I want because I can implement this actually as an overlay
• I can take this particular shape right here, this button, and I can copy it, and right over here I can start pasting interaction, right? Just like that, and that’s what I do for all of these.
•  While we’re designing we always want to be thinking about the end user and how they’re viewing this website because they might not always be reviewing the website on a very large 1920 by 1080 screen.
• And when you start responsively resizing things they will group those items. You can always un-group them
•  I can just drop that image right in there and then it fits nice and neat, right? See, look at how that resizes.
•  And you will notice that as I am changing this, not all the content will be appropriate for these smaller screens

1. I already knew that when you start responsively resizing things they will group those items. You can always un-group them. I already knew that when you are making your website on a different device, not all the content on the first page will be able to fit on the screen. I already knew that while we’re designing we always want to be thinking about the end user and how they’re viewing this website because they might not always be reviewing the website on a very large 1920 by 1080 screen.
2. I learned that prototyping means linking all the screens together with some interactivity. I learned that it might be kind of tricky dragging and pointing to these screens depending on how far away they are. I learned that command zero is to view everything. Command a is to select all.
3. Can you add gifs on Adobe XD?

 

3/29/19

Author: Paul Trani

•  So, what you can do if you’re in Illustrator, just do a simple copy, then go into XD, and right in here is where we’d paste it.
• You can resize graphics, and position them where you want, and you can also un-group and edit them all you want because they’re gonna come in as vector elements that can be changed.
• it can be updated by someone else, ’cause if you’re collaborating with someone else, you can have the branding person work on that logo and it will update within your interface.
• So you could do a simple copy and paste, or update once and have it change everywhere using Creative Cloud Libraries.
• This could be your case where you have all these assets created in PSD format so you can see right here a number of artboards created in Photoshop so I can do all my designing in Photoshop if I want to.
• the design’s ready to edit but not all effects will come through.
• But I also wanna show you that you can actually use the artboard tool, which is right over here, looks like this page with a plus sign, can select it and then I can draw out an artboard of any size that I want.
• So I can quickly make an iPhone X size version if I want to and position that accordingly, just like that.
• So right up here I can get a desktop preview and check it out, just like this. And if I use my arrow keys on my keyboard, I can go through each one of these designs, so I can invite the art director over and we can review these designs together.
• So right up here, I’ll go to Publish Prototype, title the project, I’m gonna allow comments. I can also open it up in full screen, but I’m not gonna do that in this case ’cause I wanna make sure they can see the comments area. And from there I can create a public link.
• Also, know that you can also require a password and create a private link in case it’s an internal project or the client is concerned about the designs getting out.
• I’ll go back into in Design and I will change what they need me to change right now, which is just changing this to white, doing that quite simply just like that. And then I can publish that prototype, and in this case, all I need to do is update that link.
• Because essentially, what this means is I have two assets right here. What if I changed them? Are they gonna change everywhere?
• The specific content can be changed, and it can be used everywhere. So I highly encourage to take advantage of using assets, not only for colors, character styles but also for symbols, especially as you dive into creating multiple pages.
• Possibly the most popular feature in Adobe XD is this next one, ’cause it saves so much time, and really you’ll find nothing like it in Illustrator or Photoshop or other apps for that matter.
• when you do a Command C and Command V to repeat grid
• And sure, there are other keyboard shortcuts, holding down the Alt key and the Shift key, and dragging that out, I can start to create this grid, but since I need to create so many, I don’t have to worry about doing that.
• In fact, all I need to do is select both of these graphics right here, the text, the image, really anything, and then right over here, selects Repeat Grid. What happens, it allows me to repeat it, not only the number of columns but the number of rows, as you can see.
• This saves me a ton of time, and what if I want to bring in images, I don’t want to have that same image, right? That’d be kind of silly. Instead, I can select multiple images from my Desktop, and drop them in and they’ll propagate on down.
• with Repeat Grid, but the content can be different. So I encourage you to use Repeat Grid, have fun with it, and this is just one of the exciting ways that you could use Repeat Grid.

1. I already knew that we can use photoshop and illustrator in Adobe XD. I already knew that you can resize graphics, and position them where you want. I already knew that it can be updated by someone else, ’cause if you’re collaborating with someone else, you can have the branding person work on that logo and it will update within your interface.
2. I learned that you can also require a password and create a private link in case it’s an internal project or the client is concerned about the designs getting out. I learned that when can you do a Command C and Command V to repeat grid. I learned that with Repeat Grid, the content can be different.
3. Can you do hand-drawn elements on Adobe XD?

3/27/19

Author: Paul Trani

• Within this artboard, you have this graphic, but if you click outside of this artboard, look at how your layers panel changes. So you’re gonna see all your artboards on the side, but as you click into that artboard, you’ll see those individual layers.
• if you take any shape, you can actually double click on it and you can edit that particular path.
• Well if you wanna change a curved bezier to a point, you could just double click on it and make it sharp
• But you can edit any shape that you can create. Edit down clear to its path and change it just like you want.
• So, Command-0, Control + 0. What I’m gonna do is I’m gonna select this Artboard, and I wanna add all of these colors to my Assets panel for use later.
• So right over here, under Solid Color, there’s this fly-out menu, and I can access Linear Gradient, just like that.
• Have that gradient, I can add additional color stops.
• that I want this color stopped, just hit Delete once it’s selected.
• With Adobe XD you can import images from other places, just go to file, import, and you can import JPEGS, PNG files, GIF images, SVG files as well
• You can just change the fill back to white is how you’ll do that. That gets rid of any fill that’s brought on with an image.

1. I already knew that with Adobe XD you can import images from other places. I already knew that Adobe XD has a gradient tool and color tool. I already knew that with a gradient, I can add additional color stops.
2. I learned that if you take any shape, you can actually double click on it and you can edit that particular path. I learned that if you wanna change a curved bezier to a point, you could just double click on it and make it sharp. I learned that you can just change the fill back to white to get rid of any fill that’s brought on with an image.
3. How can you have videos on Adobe XD