Absolute Paths:

• file path that is the full URL to an internet file
  • Ex. <img src=”https://www.w3schools.com/images/picture.jpg&#8221; alt=”Mountain”>

Relative Paths:

•  a file path to the file relative to the current page
  • <img src=”/images/picture.jpg” alt=”Mountain”>
  • <img src=”images/picture.jpg” alt=”Mountain”>
  • <img src=”../images/picture.jpg” alt=”Mountain’>

“../”

• Each “../” essentially moves the file back one directory. “../../” would move you back two directories. It finds the root folder and the files in it. This is helpful when you aren’t sure where the relative path starts from.
  • ../ Example: “http://domain.com/directory/subdirectory_2/page_2.htm&#8221; -> “../subdirectory/page.htm”

(It is best to use Relative file paths when possible, web pages won’t be bound to the current base URL. All links work on your own computer, current public domain, and future public domains.)

These paths are important to web design and development because they allow you to have a nice and organized website and structure. Absolute and Relative paths are needed in separate circumstances, but they help you make the best webpage in the end.

Difference Between Absolute and Relative Path

The progress I’ve made on our website includes:

• Deciding on an overall color scheme
• Choosing font and layout
• Creating Illustrator graphics
• Creating logo

Some challenges:

• figuring out what styles would best suit this topic
• figuring out layout and whether to use text or image files for header

Progress Pics!

• 

Prototyping- Sharing and Exporting

Author: Paul Trani

Date: 4/24/2019

What I Already Knew:

• You can preview prototypes on mobile by ensuring your phone has the Adobe XD mobile app and is connected through a USB port, right click Device Preview
• Go to the Preview Menu and click on the record button in the top right corner, click again to stop the recording
• You can edit content on desktop and have it edited live on mobile

What I Didn’t Know:

• Go to File, Export, make your folder and choose your format, and checkbox Export All Artboards. You can either click export as one PDF or multiple
• Go to the top right corner, click Share, and Publish Design Specs, create a public link, this tells the position of elements, fonts, font sizes, and colors
• To scroll on your prototype, select your page and expand the height of the artboard, make sure scrolling is set to vertical on the right-hand menu

What I Want to Know More About:

I want to know more about smart prototyping and some more features in Adobe XD, if there’s any left.

Repeating Content- Prototyping

Author: Paul Trani

Date: 4/12/2019

What I Already Knew:

• Changing something in the Character Styles tab will change it in the artboards
• If you change something in a symbol, right click and click “Update All Symbols” to change all appearances
• You can change multiple text boxes by clicking and dragging in your .txt file

What I Didn’t Know:

• To repeat rows and columns, go to your assets folder and drop your image in the square, select repeat grid and drag down or right to repeat horizontally or vertically.
• Highlight in green means that they are symbols, blue means that they are just objects
• You can change the font and size of a symbol element in the assets panel

What I Want to Learn More About:

I want to learn more about making a website more interesting using transitions, effects, etc.

Creating for Multiple Platforms-Repeating Content

Author: Paul Trani

Date: 4/10/2019

What I Already Knew:

• To duplicate an artboard, select your screen and click command Duplicate
• Go to File, UI kits, and choose which kit you want, download for Adobe XD, take a look at what you need, “UI Elements and Guides” for example, and open in XD, copy what you need and paste it into your artboard
• Select your items and on the right side click Repeat Grid, and drag down the green bar to have it repeat, you can adjust what you want

What I Didn’t Know:

• For black or white screens, have a separate logo that is inverted so it’s visible
• The Wireframe UI kit has many elements that you don’t have to recreate like buttons, tags, etc.
• Select your files and drag to your Repeat Grid to have different content

What I Want to Know More About:

I want to know more about the tools of Adobe XD and how to use them correctly.

Creating Graphics-Adding Text and Effects

Author: Paul Trani

Date: 4/8/2019

What I Already Knew:

• Click while holding the shift key with the ellipse tool to constrain it
  • Hold down the alt key to draw it out from the center
• You can use Command + and Command – to zoom in and out, Command 0 to view the entire artboard
• Round corners of a shape using the control points
  • Hold down alt key and drag one corner to specify which ones you want rounded

What I Didn’t Know:

• Rotate while holding this shift key to constrain an item
• You can import any graphics as long as they’re SVG
• Double click on a vector continuous times to edit it, allows you to edit on Adobe XD

What I Want to Know More About:

I want to know more of the tools Adobe XD has and have knowledge of all of them.

Sharing and Exporting

Author: Paul Trani

Date: 4/4/19

What I Already Knew:

• Click Preview at the top and click the record button, shows you where you’re clicking. It  records all interactions being done. Click stop and save
• You can share content with developers using design specs, export for the Web and create a public link
• Exporting for the Web doubles the size of your element

What I Didn’t Know:

• By clicking on the screen you get all the information, the specs, about the design, size, colors, character styles, positioning, etc.
• To preview content on a device, connect it through USB, ensure you have the Adobe XD Preview App
• Anything you adjust on the desktop is adjusted on the mobile device immediately

What I Want to Know More About:

I want to know more about making a prototype more interactive using Adobe XD.

Creating Interactions

Author: Paul Trani

Date: 4/2/2019

What I Already Knew:

• To pin elements to the top, group your elements together, and on the right side of the screen check the box that says fix position when scrolling
• Click Command A to select all and see all the linking between screens and back buttons, helps make sure everything is interacting correctly
• As a shortcut: click on the right arrow of your element, and choose the artboard from the dropdown menu you want your element to interact with

What I Didn’t Know:

• To link a button on one screen to a page on another, go to the Prototype tab, select the button, click on the arrow tab and drag it to the screen (artboard). You can change the transition for it, can link vice versa
• Click on the blue arrow on the right of an element and select “Overlay”, (position is visible on the position in the previous screen)
• For back buttons, instead of clicking on a specific artboard, click on “Previous Artboard”

What I Want to Know More About:

I want to know more about using Adobe XD and good ways to style prototyping.

 

 

Creating Graphics and Text-Creating Multiple Screens

Author: Paul Trani

Date: 3/29/19

What I Already Knew:

• With the artboard tool selected, you can make an iPhone X size canvas or anything else
• Each URL is specific to the screen you’re using
• If you have multiple artboards already in Photoshop, opening them in XD changes to PSD file to XD

What I Didn’t Know:

• Copying and pasting something from Illustrator becomes a vector element in XD
• XD brings in whatever you make in Illustrator or Photoshop and rasterized what it cannot
• You can link a design in Illustrator or Photoshop by putting it into a library, any edits in those applications updates itself in Adobe XD

What I Want to Know More About:

I want to know more about using Adobe XD and its tools to create prototypes for clients.

Creating Graphics and Text- Adding Imagery

Author: Paul Trani

Date: 3/27/2019

What I Already Knew:

• You can import images from other places, just go to file, import, and you can import jpegs, pngs, svg files, etc. Drag and drop into Adobe XD
• Use your layers panel to change the stacking order
• The T command is a universal tool to add a text box

What I Didn’t Know:

• You can change and edit any shape and make paths in Adobe XD
• You can select half of a piece of text and edit the thickness, resize, etc.
• Go home, edit, duplicate, command + D, to have another artboard, and then Command + 0 to look at all of the options

What I Want to Know More About:

I want to know more about using Adobe XD to create smart mock-ups for clients.