How exactly would someone be able to implement a Border at the bottom like the one MademanOne had in his image? (perhaps a solid red block with a predefined image size through a Paint Program, but would that mean resizing would be impossible? I already know the interface options/buttons would placed through code, of course.)

Second question, how would you change your Typing input to be placed inside a box on a certain part of the screen instead of Byond's default say window? (I think LummoxJR did it in his Interface tutorials, but "say" still had to be typed out, so I think that was more of a command bar. Correct me if I'm wrong.)

You could just use screen objects or buttons. It's rather simple. (Buttons wouldn't have to be placed through code.)
By the looks of it, the F1-F10 list would most likely be screen objects, since they would need images to be displayed over them. In that case, the input on the bottom right would have to be placed on top of the map control. (Which is perfectly plausible, as far as I know. I haven't tried it.)

Second question, how would you change your Typing input to be placed inside a box on a certain part of the screen instead of Byond's default say window? (I think LummoxJR did it in his Interface tutorials, but "say" still had to be typed out, so I think that was more of a command bar. Correct me if I'm wrong.)

First part of your question: Put an input control anywhere in your skin.
Second part of your question: You can set the command of the input to be anything you want. Either using winset(<player>, <input id>, "command") or through the skin editor. If you want the command to be visible on the input and come back whenever the player sends a command, then you put a '!' at the beginning of it.
For example, you could put '!Say' as the command and it would have Say as the default command. (The one the default skin uses is <code>!say \\\"</code>, I believe. It has to escape the quote, but it has to escape the backslash that is escaping the quote. XD)