TASK 1:

Responsive Site Design

Responsive site (or web) design is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. Responsive site design is one approach to the problem of designing for the multitude of devices available to customers, ranging from phones to desktops.

Content Management System (CMS)

Content Management System or CMS is a software application or set of related programs that are used to create and manage digital content. CMS’s are typically used for Enterprise Content Management (ECM) and Web Content Management (WCM). An ECM facilitates collaboration in the workplace by integrating document management, digital asset management and records retention functionalities, and providing end users with role – based access to the organisations digital assets.

Integration Of Social Media 

For many marketers, social media is integrated in almost every aspect of their marketing campaigns, which is a great way to leverage the power of social media to increase awareness of your marketing efforts. But while brands invest so much time and effort into social media integration of their initiatives, many miss out on the one of the biggest ways to showcase the business’s social savvy, their website. Social media and your website should work seamlessly together to promote your online brand.

Planning for Alternative Inputs:

Mouse:

Be consistent in how you list mouse procedures. For example, always list the mouse method before the keyboard method if you document both. Don’t combine keyboard and mouse actions as if they were keyboard shortcuts unless space is limited. For example, don’t use Shift+click. Instead, use Select Shift while clicking ….

Pen-computing and touch:

Use tap and double-tap instead of click and double-click when writing content specific to touching a screen or using a tablet pen. Tap means to press the screen with a finger or pen tip and then to lift it, usually quickly.

Term	Usage
tap	Use to describe selecting a button, icon, or other element on the screen with a finger or the pen by tapping it once. Don’t use tap on.
double-tap	Use to describe selecting an item by tapping twice in rapid succession. Hyphenate. Don’t use double-tap on.
tap and hold	Use only if the app requires it to complete a specific interaction. Don’t use touch and hold.
pan	Use to describe moving the screen in multiple directions at a controlled rate, as you would pan a camera to see different views. For contact gestures, use pan to refer to moving a finger, hand, or pen on the device surface to move through screens or menus at a controlled rate, rather than quickly skipping through content using the flick gesture. Don’t use drag or scroll as a synonym for pan.
flick	Use to describe moving one or more fingers to scroll through items on the screen. Don’t use scroll.
swipe	Use to describe a short, quick movement in the direction opposite to how the page scrolls. For example, if the page scrolls left or right, swipe an item up or down to select it.

Images:

Copyright Images:

Photographs, illustrations and other images will generally
be protected by copyright as artistic works. This means
that a user will usually need the permission of the
copyright owner(s) if they want to perform certain acts,
such as copying the image or sharing it on the internet.

References to “images” in this Copyright Notice include:

• digital photos taken on mobile phones and digital
cameras;
• images that were first generated on photographic film
and any digital images created from them; and
• images such as diagrams and illustrations.

Stock Images:

Stock photos are professional photographs of common places, landmarks, nature, events or people that are bought and sold on a royalty-free basis and can be used and reused for commercial design purposes. The photographer (or stock photography distributor) has ownership to the images, and the commercial designer has some limited usage of the photo (which is set out in the Terms of Service by the company you purchase the stock photos from). Some conditions of use may include things such as use of the images is licensed, not sold or in case of a stock photo being used in a magazine there may be a maximum number of copies of the image allowed to be printed under the agreement. Terms of  Service policies will differ between stock photography distributors.

Image Formats:

An image format can be explained as a way of organizing digital graphic information. Formats that store this information are called either raster or vector. In raster formats, images are constructed as grids of pixels with the appropriate data stored in a file in either a compressed or an uncompressed way. Rasterized images usually lose quality when they’re scaled up. Examples of raster formats include JPEG, PNG, GIF, BMP, and TIFF.

Vector formats construct graphics based on mathematical formulas and are used to create images that may require resizing. Vector images are created in graphic editors and usually take the form of icons, logos, or drawn illustrations. Photographs cannot be vector, since cameras yield only raster images. Examples of vector formats include SVG and CGM.

Most Popular Image File Formats:

• JPEG – Joint Photographic Experts Group
• GIF – Graphics Interchange Format
• TIFF – Tagged Image File Format
• PNG – Portable Network Graphics

Image Editing Software:

1. Adobe Lightroom:

Adobe is truly the gold-standard when it comes to image editing software. If  Photoshop comes off as too complex and cumbersome, then you’re sure to love all the incredible things that you can accomplish with Adobe Lightroom. Lightroom allows you to edit your pics with a host of fantastic features, including:

• Fixing and blurring tools
• Presets and professional filters
• Customizable sliders
• Multiple device support and sync

2. Gimp:

GIMP is a free professional photo editing software. It is easy to download and install on your computer. GIMP has multiple features which help you with retouching photos, photo composition, picture enhancement, and includes a built-in file manager. You can also create image authority with GIMP.

Many photographers regard GIMP to be a great alternative to Photoshop, as it comes with a range of features that help with things like photo composition and image retouching.

3. Adobe Photoshop:

It’s hard to write an article about the best photo editing software for photographers without giving Adobe Photoshop a well-deserved mention. Photoshop is the go-to tool for illustrators, designers, and artists around the world. Photoshop’s masking, retouching and layering tools are still some of the most compelling on the market, though it’s fair to say that this tool might not be best for the odd “basic” touch up. Photoshop is designed for painstaking work on your portfolios.

4. Pixlr Editor:

The Pixlr Editor is another online photo editing software solution, although you can download a desktop or mobile app if you prefer. There’s even the option to upgrade to “Pixlr X” if you’re looking for a more advanced editing option. Pixlr is very similar in nature to Photoshop, as it allows you to add images to blank canvases, create unique effects, and add filters on-the-go.

---

My Website

Website Research

Dublin Zoo

What i like about the Dublin Zoo website is that all the information and links you need are right in front of you. You do not have to scroll down to access any further information. You are not bombarded with pictures and illustrations when you open the website. It is a very simple and non intimidating website.

Aquarium de Paris

Again, i like the simplicity of this website. Subtle colours with small illustrations. Easy to navigate. No ‘in your face’ adverts.

Oceanagrafic de Valencia

Very aesthetic website. I like they way they used just one image for the home page. Not only does it make the website nice to look at but easy to navigate. It is clear to see where the links to further pages are.

Ushaka Marine World

Wireframes

Typical digital wireframes.

A website wireframe, also known as a screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose

My Wireframes