Keep That Mock-Up Organized! (Part 3)

October 9, 2015

Website design should be catered to the branding of the company that the site is for. This extends into the sketching phase of development, in that certain fonts, shape styles and colors should be used. Visual traits of the brand can actually make a great starting point in this way, as elements that work together have essentially been chosen outright. Keeping track of the specific color values can be a bit of work, though. While copy/pasting a set of hexadecimal or RGB values is an option, it’s a more complicated one than necessary.

So, now that we’ve gotten used to the idea of working with layers and comps, let’s take a look at how Photoshop works with colors and palettes! read more

avatar

Gary is a team member at Sephone, helping to design, build and maintain websites. He is also a web design student at the New England School of Communications of Husson University.

My Old Friend Google Earth

October 2, 2015

Unlike most Google Earth Logoeveryone else at Sephone, I own a phone with an Android operating system and not an iPhone.  Every time I get a new phone I manage to leave several “apps” that I have tried and no longer use on my phone. They get carried over from phone to phone, I seldom seem to uninstall anything unless I really don’t like it.  One of these apps I had not used in a very long time was Google Earth.

I love Google Maps and I have lots of Google apps naturally, because of the Android operating system on the phone itself.  But Google Earth seemed to get lost in the shuffle.  (As I swipe and swipe past it on my screen 100 times a day.)

Recently, I was hiking and scouting an area of Maine and my GPS was less than helpful,  the GS sheets I had and could find were several years (some more than 10), old.  Given this area is shared by loggers and logging operations, roads are changed all the time.  This summer, the local ATV, snowmobile and bike clubs have been in the area blazing trails for their users – it seemed pretty hard to figure out where the trails were, where they went and most importantly how not to get lost!

I got back to camp and looked up where I was  on Google Earth and it showed me such a better overall view of what I was actually at and where I was looking.  It gave me a new appreciation for what I originally thought of as a “cute video game.”  I couldn’t have been more mistaken.

One thing you must know if you want to use Google Earth. It’s like a compass, you need to check it before you need it.  If you are out in the wild and there is no cell signal, Google Earth cannot help you. Check before you leave or if you have a cell signal then Google Earth can find you and lead you home.

avatar

Kelly's been known as the Marketing Maven since before the term was hip. (That means she's old.) As a natural Community Builder, she loves to get people together, bring resources to the table and solve problems!

3 Steps to a Speedy Website Launch

September 24, 2015

Traffic light showing greenLaunching a new website – or redesigning the site you have – often raises a lot of questions. We’re asked something pretty basic every time we start talking with someone about a new site: how long will it take before we can launch the site?

There are a number of factors that help us figure out when a site will go live, including how big or complex the project is and what else we have going in our pipeline. (Need a refresher of the basic project process? We have that.) But here’s a look at three things you can do to make sure your site is up and running as quickly as possible.

read more

avatar

Justin is a web and mobile developer at Sephone. He's interested in user-driven design, social media, and web services. He also enjoys learning and exploring new ways for businesses and people to use the web.

Working as a Team

September 18, 2015

Here at Sephone, we work on a wide variety of projects based on the intricacies and level of complexity, a lot of them require more than one of our team members .  This also requires a high level of cooperation and coordination from all of our team members.  From project management, requirements gathering to design and development, everyone has a critical role to play by the time a project comes to an end. read more

avatar

Brady is the voice on the other end of the phone line when you call Sephone. He graduated from the New England School of Communications in 2009 and assists Sephone in building and maintaining our sites.

Keep That Mock-Up Organized! (Part 2)

September 2, 2015

Hello again, and welcome to Part 2 of a series of posts wherein I explain some helpful practices for organized sketches in Photoshop. Last time, I talked quite a bit about layers and groups. Well, there’s another aspect of layers I’d like to mention – “layer comps.” Layer comps (compositions) in Photoshop are, essentially, saveable “views” that can be easily interchanged, and even exported for easy sharing as a PDF file. They’re actually a little more complicated than that, though. read more

avatar

Gary is a team member at Sephone, helping to design, build and maintain websites. He is also a web design student at the New England School of Communications of Husson University.

HTML – Page Markup

August 27, 2015

In the last entry to our HTML series, Brady went over some of the basic tags used within the <body> tag of a website. In today’s lesson, we will block out a basic website using semantic HTML5 tags and take a quick look at “Cascading Stylesheets.”

We’ve worked with semantic tags in the past when we added microdata to an address. Here we placed special attributes that helped define what the content is. With our new HTML5 tags we can better define each section of a website. For example, defining where on the page the navigation exists.

Let’s take a look at some of the tags we’ll be using in our project.

HTML5 Tags

  • header – This will be used to define the top of website. This is usually where you’d find the logo of a website. The header tag can also be used multiple times on your webpage, for example, to define the header of a <section>.
  • nav – This will be used to define where the navigation on our website exists.
  • main – This will be used to define where the main content of our website is located.
  • aside – This will be used to define any secondary content such as a sidebar.
  • footer – This will be used to define the bottom of the website. This is usually were you’d find copyright information. The footer tag can also be used multiple times on your webpage.  For example: To define the footer of a <section>.
<!doctype html>
<html>
<title>My Awesome Website</title>
<meta charset="utf-8">
<meta name="keywords" content="this, is, my, keywords">
<meta name="description" content="This describes the content of the page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/styles.css">
<script type="text/javascript" src="/js/script.js"></script>

<body>
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</body>
</html>

Using what you learned in the last lesson, let’s add some markup to our website:

<!doctype html>
<html>
<title>My Awesome Website</title>
<meta charset="utf-8">
<meta name="keywords" content="this, is, my, keywords">
<meta name="description" content="This describes the content of the page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/styles.css">
<script type="text/javascript" src="/js/script.js"></script>

<body>
<header>
<img src="/img/logo.jpg" alt="My Logo">
</header>
<nav>
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h1>Welcome to my website</h1>
<p>This is a paragraph</p>
</main>
<aside>
<h2>Upcoming Events</h2>
<ul>
<li>Sample Event 1</li>
<li>Sample Event 2</li>
<li>Sample Event 3</li>
</ul>
</aside>
<footer>
<p>Copyright Information</p>
</footer>
</body>
</html>

If you open your website in a browser, visually it might not be very interesting, but you do have a proper website.

To make our website visually appealing it will require some knowledge of “Cascading Stylesheets,” or “CSS.”  Using CSS, we can target elements of the page and change their default appearance.  For example: If you want to make the content within the <h1> tag red you’d have to open the styles.css file in your css folder and add:

h1 {
color: #FF0000;
}

Here you are using an element selector, targeting the <h1> tag directly, all <h1> tags on your website will now be the color red as long as the stylesheet is linked to the page. There many different ways to target elements, add styles, and layout a page using CSS. I encourage you to further look into the different possibilities using CSS.

avatar

John is a designer at Sephone.

FOR IMMEDIATE RELEASE  

August 18, 2015

                                                                                 Download to Print

For Immediate Release:  BANGOR, MAINE
Local business, Sephone Interactive Media, has updated and expanded the AFF mobile APP aimed to help 2015 American Folk Festival attendees navigate this year’s Festival easily and “paperless.”

The American Folk Festival app features the following:

  • Complete Artists information
  • Scheduled times of Performances
  • Maps of Stage and Venue Locations
  • Ability to take photos and share with other Festival Attendees

If someone would prefer not to download the app, Tablet and SmartPhone users can still go to the Festival website (http://www.americanfolkfestival.com), which is responsive to all web browsers.

This APP is the Official APP of the American Folk Festival, Sephone Interactive Media has been the creator of the APP and the website from the beginning in 2011. And since 2011, there have been annual updates and enhancements.

“This is our latest version of the American Folk Festival APP. It puts information about our Festival right at your fingertips,” says Justin Russell, lead developer at Sephone and veteran Festival volunteer.  “If there is some change in the location or time of an event, the APP will update itself, so unlike paper schedules, it is up to the minute information and always with you.”

This year’s APP includes automatic alerts, notifications from the Festival with news and updates. Notifications will also show festival-goers, who is currently performing on the stage where they are and provide a chance to see when the artist will be performing next over festival weekend.

Russell adds, “We love developing these kinds of tools for businesses, organizations and the region as a whole. We’re excited to add new features as more people use the American Folk Festival APP, and we can’t wait to work on more projects like it in the future.”

Sephone Interactive Media is a Bangor-based web and moblle development company, helping businesses and people use technology to grow and increase efficiency.

FMI contact: Kelly H. Cotiaux, Partner and Marketing Maven, Sephone Interactive Media 207.262.5040 blog.sephone.com ~ sephone.com , Twitter: @ladyotrout ~ @sephone, Facebook
###

avatar

Kelly's been known as the Marketing Maven since before the term was hip. (That means she's old.) As a natural Community Builder, she loves to get people together, bring resources to the table and solve problems!

Keep That Mock-Up Organized! (Part 1)

August 12, 2015

One of the important steps in creating a website is creating mock-ups of some possible designs. Here at Sephone, we use sketches to show our clients how certain aspects of their site may appear, how things are positioned on the page, and to give them a chance to see a few different possibilities and provide feedback. Not only are sketches a great tool in planning, they also help to keep everyone in the loop.

In this post, I’ll be looking over how to keep these sketches organized.

read more

avatar

Gary is a team member at Sephone, helping to design, build and maintain websites. He is also a web design student at the New England School of Communications of Husson University.