John Abbott College
As a designer, I like to take risks and try new styles and concepts I am not familiar with. My intentions are to create easy to navigate design both virtually and on print. The design and the intended information must be clear and cohesive. The viewer should not be struggling to find key information.
Continue reading “About Arpi”
Greetings! My name is Michael Ruscitti, but I usually go by the nickname Mike! I am a Montreal based graphic designer. I adore pop culture in all its forms, and enjoy drawing during my spare time!
To say that I’m pushing the limits with my artistic abilities is an understatement! I strive for all sorts of ideas, reaching for the stars!
Hey, I’m Justin.
I specialize in Web Design, more specifically, WordPress website design.
For the past few months, I’ve had the opportunity to work closely with clients and partners across the province to help them renew their online strategy. I introduced many to the benefits of using social media tools and taught them to market their personal brands while doing it myself for others.
Continue reading “Justin Lalonde: Graphic & Web Designer”
Hi, I’m David Baum: a passionate graphic and web designer (both a student and a freelancer). I am also a proud Montrealer, a lover of music, movies, travel and good poutine.
During my time as a Graphic and Web Design student, I have developed my skills across the domains of branding, illustration, print design and web design. The expertise that I have gained from GWD motivated me to start my graphic design freelance business, David Baum Designs, as a means to further my skills beyond school. My freelance projects so far have primarily focused on the creation of logos, advertising/branding material and photo albums. My largest job so far has been as the ad designer for the December 2020 issue of Perspective, the magazine published bi-annually by the Donald Berman Maimonides Geriatric Centre in Côte Saint-Luc, QC. This year, I hope to focus on a greater amount of branding and social media projects for clients.
Continue reading “David Baum: Graphic & Web Designer”
Many web designers love ServMask.com‘s All-in-One WordPress Migration plugin. It’s easy, it works very well. But it also has a file size limit of 512Mb. So what is the All-in-One-WP-Migration 512Mb limit workaround?
Or, you may also have encountered a recent bug where the upload progress stalls before completion. So, in either case, here’s a solution that will help you get your files on the server.
If using static files to build your web site, the most common way to move files from the development machine to the public server is to use old school FTP or the more modern and secure SFTP.
Either of these two types of file transfers can be used to exclude some of the files needing to be uploaded from being included in the All-in-One archive file.
In web design in general, visual and audio-visual media files (such as gif, jpeg, and png images, but also mp4 video and mp3 audio files, etc) are the usual culprits in terms of being bandwidth hogs.
Non web files like PDFs (especially for graphic designers) and Microsoft Office documents (for businesses) can also take up a lot of space in the WordPress media library.
Before considering taking any other actions, make sure your image files and other media are as optimized as possible. Read this post about image optimization and download ImageOptim (it’s free).
Portable Network Graphic files are very popular, and are the default format for many applications on macOS (like screen captures). They tend however to be very heavy, especially the PNG-24 variety.
If you have a lot of PNG files already uploaded to your WordPress media library, consider installing the PNG 2 JPG plugin. With it you can select the non-transparent PNGs and automatically convert them to JPGs without breaking any links in your web pages.
Just make sure to make a backup of your media library, and select the option to delete the original PNG files.
The actual workaround consists of two parts:
In the screenshot above, you will notice that we do not export useless data from the database (spam, revisions) as well as files that we can easily transfer via SFTP.
In fact, all we really need the plugin to do is export the MySQL data and automatically replace the “localhost” part of any file paths and URLs with the name of the public web server (“207.162.58.43/~gwd”).
Of course, you can tweak these preferences according to your needs, but the main concept is to not export the media files (aka the “uploads” folder). This will keep your All-in-One WP Migration archive file as small as possible.
The last part of the process is just logging into the web server and uploading your files. Any SFTP capable program can do that easily.
Warning: do not upload the wp-config.php and the .htaccess files. these are custom configured for your localhost and need to be modified on the remote server. If you have WordPress already installed and working on the server, then these files are already there and do not need to be updated.
However, considering the number of files in a default WordPress installation the upload may take longer than you would hope for. Here are a few tweaks that can help:
If you use FileZilla, you can use the option to only replace files when the ones you are uploading are newer or of a different file size.
The screenshot below shows the screen where you set the default value, but you will be prompted for the same choice when you start uploading.
The other optimization you can use for FileZilla is to increase the number of simultaneous transfers (first field in the screen capture below). Set the two other fields to zero.
And finally, your last option would be use Adobe Dreamweaver to handle the SFTP uploads.
Dreamweaver’s local vs remote site comparison algorithm is quite good and will only upload the files that are new or have been edited since the last synchronization.
Obviously, a workaround is just that: a workaround. If for whatever reason it doesn’t work we can still transfer the web site. We just have to do it manually (without the help of an automated plugin).
Open up your web browser on localhost and navigate to phpmyadmin. Select your WordPress database.
Next, click the Export tab.
Make sure you have selected the database, not one of it’s tables. You can check this by looking at the header on the Export page. There are no options to set on this page, the default values are correct.
Click Go to save the SQL file.
(If the SQL shows up on screen instead of downloading it automatically, you can select all and paste it into a text file manually. Or, you can click the Custom radio button and select the “Save output to a file” radio button.)
Open the SQL file you just downloaded in your favorite plain text editor.
Do not use Apple’s TextEdit (by default it is a Rich Text Format editor) nor Microsoft Word. Use plain text editors like BBEdit, Visual Studio Code/Codium, Sublime Text, etc.
Use the Search and Replace function to search for your localhost name. For example: http://localhost:8888. Replace it with the name of your remote server (and folder if necessary). For example:
Pay special attention to the http on localhost vs the https on the remote server. Do a few spot checks to see if all the paths are correct by searching for http.
Now that the database file has been updated with the new paths, you need to login to the remote server and open PHPMyAdmin.
On the Graphic and Web Design server, students only have access to their own database. So there is no need to select it. In PHPMyAdmin, you will select all the data tables and “drop” them which is database-speak for deleting them.
If you previously uploaded any other tables, for example the “photos” table for the PHP Photo Gallery project, deselect that table by unchecking its box before continuing.
To drop all the selected tables, click the “With selected:” drop-down menu and choose “Drop”. This will bring you to another page where you will need to confirm the delete action.
Next, go to the PHPMyAdmin Import tab and click Browse to select your modified SQL file. There should be not options to select as the default values will work fine.
Once you have successfully imported the SQL file, and you have uploaded the new or changed files with FileZilla or Dreamweaver, you should empty your browser’s cache and go visit your web site to see if it works.
Hopefully, all works as intended!
If you have any questions or comments, drop them in the comments section below.
Web design students often ask how to center elements using CSS. Centering an element in web design is often seen as a tricky technique. This is because of the differences in between inline- and block-level element behaviors. Not to mention also adding different positioning techniques to the mix.
The first rule of centering using Cascading Style Sheets is simple. Make sure that the element you are trying to center is “aware” of the amount of space you want it to be centered in.
More on this “awareness” later when discussing absolute positioning!
That seems like a complicated sentence, but it really just means make sure the element is a block-level element. Most tags are blocks—p, div, h1, ul, li, etc—so you don’t really have to do anything.
But certain tags are inline elements—img, span and a. Images for example will need to be defined as display: block if you want to be able to center them.
.center {
display: block;
}
This rule is just basic math. Especially if you try to think of the calculations you are asking the browser to do when you want to center elements using CSS.
Let’s imagine your screen is 1000px wide. You want to center an element that is 500px wide. The browser has to calculate this:
1000px screen – 500px element width = 500px space left over
500px / 2 = 250px to be used as the left and right margins of the element
In other words, you need to define the width of the element you want to center. Otherwise the browser can’t do the math.
.center {
display: block;
width: 500px;
height: 200px;
}
If you followed the logic explained in the second rule, the third rule of how to to center elements using CSS becomes fairly obvious. You need to tell the browser to set the left and right margins automatically of the object you want to center.
.center {
display: block;
width: 500px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
If you use absolute positioning to place an element somewhere on the screen, the above technique will not work without a few tweaks. This is because an absolutely positioned element is taken out of the context of the page (aka the “text flow“).
In other words, once an element is given the the position: absolute rule, it loses it’s relationship to most of the other elements on the page.
An absolutely positioned element will preserve only one type of relationship:
.centered-ab {
display: block;
width: 500px;
height: 200px;
top: 1em;
left: calc(50% - 250px);
/* place top left corner at middle of parent element (or screen)
then back up by half of the element's width to center it */
}
As you can see in the code above, centering an absolutely positioned element uses most of the same code as a regular element. However, we remove the automatic margins because the element is no longer in the text flow of the page along with all the other tags, so the browser has no idea how to calculate the margins.
But the browser is very aware of the width of parent element (or the screen width). So we can easily set the element to be positioned at 50% from the left edge.
This works well, but the top/left corner of our object is now right in the middle of the screen. The center of our element is too far to the right. We need to move the left edge of our object back towards the left by half it’s width. This is where the CSS calc function comes in really handy. It does math just like a calculator.
calculate: 50% (of parent, or of screen width) minus half the width of our absolutely positioned element (we defined it as width: 500px;).
left: calc(50% - 250px);
With these two types of centering solutions, you should be able to handle most situations where you need to horizontally center an element on a web page.
If you have any questions or something doesn’t seem clear, drop a comment below!
Hi, I’m Audrey and I’m a Graphic & Web designer! As a designer, I have a process that I go through to be able to accomplish my work. When I have a new project, I like to do research before starting to sketch to obtain ideas or a feeling of what should or shouldn’t be represented in that project. Then, I start putting all of my thoughts on paper .
Continue reading “Audrey Parent – Graphic & Web Design”Almost every student who thinks about registering for our program asks: “Should I buy a computer for Graphic & Web Design?”. The obvious answer is yes. But the real questions are which kind, how much to spend, which specifications are required ?
The above YouTube video is a recorded virtual “meet the teachers” session held in Spring 2020 where GWD co-chair Rick Rock and web/photo teacher Eric Girouard, as well as graduating student Anastasia Dalalakis, answer incoming students questions about the hardware requirements for students in the program.
One of the most often asked questions by design students is: how do you figure out how to price your design work? In GWD, we have been asked this question dozens of times. Here’s a primer on how to go about it.
The main issue designers face is the impression that they must sell their work by number of hours spent in front of the computer.
In fact, what you should be selling is a license to reproduce your copyrighted artwork defined by geographic reach, time limit, type of media and release of rights.
For example, an print ad design license value can be determined by reach (local, provincial, national, international or world-wide); for a month, three months, a year; in a black and white newspaper or color magazine; and whether or not the client is purchasing the right to reproduce the work for that one time or forever.
As you can see, the same artwork can be worth many different sums in different circumstances.
The best way to learn to do it “for real”: go get the designer’s handbook to pricing https://www.amazon.com/Graphic-Artists-Handbook-Pricing-Guidelines/dp/0932102166 Follow their recommendations as far as what the job is really worth. If you don’t follow such standards you easily fall into hourly rate work (or even worse, Fiver) which usually is far below what you should be earning.
In terms of hourly rate, add up all your monthly expenses (rent, phone, food, etc) and divide by the number of hours you want to work. This will give you your break-even point. Under no circumstances should you be earning anywhere below or near that amount. Always 2x or more.
For example, $2000 in monthly expenses, 160 hours per month = $12.50/h. Below that you lose money. Pass on the job. At $25/h you pay your expenses and have some profit.
Most graphic designers work at least at $25 if not $40 to $80/h for freelance stuff. Remember you will need to pay taxes so 1/3 of the total should go straight into the bank.
For example, how many web page screens do you need to design? Home x 3 sizes + how many other pages? This is art direction in Adobe XD, Figma or Sketch. That’s worth one price.
Actual coding is another part of the job. That’s development @ $60-$125/h.
Writing & translation? Photography fees? Always add a markup to whatever part of the job your subcontract to other people. You are responsible for their work and you need to supervise the overall project. Add 20% to what subcontractors bill you.
Be very specific about what you are being asked to do and what you will be delivering and when. Ex: number of pages, branding, etc. Write it all down in a contract. Give them 2-3 free changes after which you start charging $XY per hour again.
If your client wants to own the copyright to your work, you should multiply the total fee by at least 3x.
https://www.hongkiat.com/blog/freelance-contract-clauses/
Hope that helps. Remember, you have a specialized skill. Don’t give it away for $50.
First of all, MAMP is an acronym: it stands for Macintosh, Apache, MySQL and PHP. It represents the basic set of server software needed to run dynamic web sites (web sites that change on-the-fly with user interactivity).
There is also WAMP (for Windows) and LAMP (for the Linux operating system). Most of the internet runs on LAMP servers.
In modern web design, the web server plays a huge role in making web sites work they way we expect them to in the 21st century.
For example, the act of commenting on a social media post and having your comment display immediately on the web page requires a lot of automation in between your browser, the web server (which processes your actions on the page) and the database server where your comment text and it’s related info is stored.
As a visual designer, you need to be able to see the end product: good old HTML and CSS in your web browser. This is what MAMP does: it provides the basic back-end software of modern web sites: the Apache web server, MySQL database server and the PHP scripting language that connects the two together.
MAMP for macOS and Windows
Bitnami server for macOS, Windows and Linux
XAMPP for macOS, Windows and Linux
In the visual design industry, MAMP is considered the default server software when designing on your own computer. It installs everything in a single click. It has a friendly user interface. It also has been around for a long time and has a large user base.
MAMP installs in your applications folder, and thus requires an administrator’s password to be installed.
Bitnami offers the same software. The user interface is slightly less polished but works perfectly fine. It’s advantage is that you can install it anywhere on the computer, such as your Desktop folder or on an external USB drive. Therefore you can install it in the labs at school without having to know the admin password.
XAMPP (Apache distribution containing MariaDB, PHP, and Perl) offers, once again, the same software in another packaged installer. In general, XAMPP is a bit more difficult to get used to by beginners.